Component

nav:

<ion-nav [root] = 'rootComponent'></ion-nav>
....
import {Nav} from 'ionic-angular';
....
export class AppComponent{
  @ViewChild(Nav) private nav:Nav;
  push(){
    nav.push(PageOne,{id:1,name:'ztw'});
  }  
} @Component({template:`<p>{{show}}</p><button (click)='goBack()'> back</button>`})
export class PageOne{
  show:string
  constructor(
    private:navParams:NavParams,
    private:navCtrl:NavController     
    ){}
  ngOnInit(){
    let name:string=navParams.get(name);
    let id:number=+navParams.get(id);
    this.show=`name : ${name} , id: ${id}`;
  };
  goBack(){
    this.navCtrl.pop(); //this.navCtrl.popToRoot(); 回到root
  }
}
可以通过@ViewChild(Nav)navCtrl,访问内部属性;

navCtrl.setRoot(component:Component) ;  //其实等同于rootComponent=component ;

    .pop();              //等同于new ViewController().dismiss();

    .push(component, {param:value} ,...);            //通过 new NavParams().get(param)获得

    .insert(index,component,{param:value},...);

Menu:

<ion-menu [content]='content' silde='right' id='authenticated'>
<button menuClose> close</button>
<button menuOpen>open</button>
  <button menuToggle>toggle</button>
</ion-menu>
<ion-menu silde='left' id='unauthenticated'> </ion-menu>
<nav-ion #content> <nav-ion>

属性:

import {MenuControll} from 'ionic-angular';

new MenuControll().open()

          .close()

          .toggle('left')   ;//多个menu,且不在同一位置时,可使用位置来控制;

          .enable(ture,'authenticated');  //多个menu时,以ID来控制。

ViewController:

  属性:

      willEnter;  ngOnChanges

      didEnter ;   ngOnInit

      willLeave;  before unActive

      didLeave; after  unActive

      willUnload;  after ngOnDestroy;

        // all return Observable ;使用:

this.viewCtrl.didEnter.subscribe(val=>{console.log('didEnter')});

  事件:

      onDidDismiss();OnWillDismiss();

  方法:

      dismiss();

      .....

 alerts:

 

let alertCtrl=new AlertController();
alertCtrl.create({
title:'alert msn',
message:' msn'
buttons:[
{text:' ok' ,
hanlder:data=>{console.log(data)},
    
}] ,
inputs:[
{type:'text',name:'name',placeholder:'account'},
]
})

  类似于绑定了一个#form='ngForm' 或者 [fromGroup]='form';

  而每个button的hanlder中返回的data,则为form.value;

 Config:

  

import {IonicModule} from 'ionic-angular';

@NgModule({

   imports:[
IonicModule.forRoot(MyApp,opt,DeepLinkers)
]
})

  opt={ iocnMode:'ios'   ,  modelEnter:'model-silde-in'};

DeepLinkers;

    Ionic2中的页面导航不显示在URL上。

    而在DeepLinkers中设置了的component,可以在url上导航,as a breadCrumb。

    DeepLinkers={ links:[{component:PageComponent,name:'page' , segment : 'pageOne' , defualtHistory:'HomePage'}]}  //url为http://localhost:8100/#/pageOne;

      defualtHistory:PageComponent在没有设置返回时,会自动设置back button。导航至HomePage.

 InfiniteScroll    && Refresher:

...
template:`
<ion-content>
<ion-list><ion-item></ion-item></ion-list>
<ion-infinite-scroll (ionInfinite)='do($event)'>
<ion-infinite-scroll-content loadingSpinner='' loadingText=''>
      //<ion-refresh-content refreshSpinner='' refreshText=''></..> </ion-infinite-scroll-content>
</ion-infinite-scroll>
</ion-content>
`
......
export class Page{
.......
do(inifinate){
if(end) return inifinate.enable(false);
Http.get(...);
inifinate.complate();
}
}

  ion-infinite-scroll-content:控制载入等待时的样式;

没有data可供加载时,使用inifinate.enable(false),使其失效。

refresher使用方法大致相同,用于向上刷动。

 RadioGroup:

  

<ion-list radio-group [(ngModel)]='getRadio'>
<ion-item>
<ion-label> one</ion-label>
<ion-radio value='one'> </ion-radio>
</ion-item>
</ion-list>

  设置了radio-group后,getRadio可获得选中值,radio-group为单选。

Segment:

<form [formGroup]='form'>
<ion-segment [formControlName] ='"segment"'> // 也可以使用<ion-segment [(ngModel)]='getSegment'>将button的value连接到getSegment. <ion-segment-button value='one' >one </..>
<ion-segment-button value='two'>two </..>
</ion-segment>

使用formGroup;可以直接使用this.form.form.get('segment').valueChanges来进行监听。

我的例子:https://github.com/zhantewei2/Ionic2-example-notes/tree/master/pages/testSegment

     这个例子是一个比较笨拙的方法。

<ion-segment [ngModel]='segment' (ngModelChange)='Changed($event)'>使用这样可以,对value改变事件进行监听。

ItemSliding:

 
<ion-item-sliding #slide (ionDrag)='drag($event)'>
<ion-item-option icon-left (ionSwipe)='Swiped()'>
<button item-button (click)='close(slide)'>
<item-icon name='archive'></item-con>
button
</button>
</ion-item-option> export class Test{
subject:any;
ngOnInit(){
this.subject=Subject.thrrotleTime(300).subscribe(val=>{console.log(val)})
}
    drag(e){
this.subject.next(e.getSlidingPercent()); //获得item-sliding的滑动范围。
}
close(node){
node.close() //关闭item-sliding
}
}

  

  方法.close();

  事件:ionDrag();

    <ion-item-option> :ionSwipe(); //滑动成功时触发。

ionReorder:不建议使用。

Ionic2学习笔记的更多相关文章

  1. Ionic2学习笔记(10):扫描二维码

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  2. Ionic2学习笔记(9):访问本地设备

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html               Ionic2提供了访问本地设备的方法,但是需要安装 ...

  3. Ionic2学习笔记(8):Local Storage& SQLite

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html              Ionic2可以有两种方式来存储数据,Local S ...

  4. Ionic2学习笔记(7):Input

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html           我们先来看一个简单的输入用户名和密码点击登录的界面:   ...

  5. Ionic2学习笔记(6):Navigation

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html           Ionic2中创建一个页面很方便,在页面之间相互切换也很方 ...

  6. Ionic2学习笔记(5):Provider

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html             Provider是一种为App提供数据源的方式, 举个 ...

  7. Ionic2学习笔记(0):HelloWorld

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...

  8. Ionic2学习笔记(4):*号

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html                     大家常常会在ionic2页面中见到*号 ...

  9. Ionic2学习笔记(3):Pipe

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串 ...

  10. Ionic2学习笔记(2):自定义Component

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html                     上一篇提到,Ionic2提供了很多Co ...

随机推荐

  1. Cannot open the disk 'D:\Program Files\VMOS\Centos.vmdk' or one of the snapshot disks it depends on

    启动vmware时出现以下错误: Cannot open the disk 'D:\Program Files\VMOS\Centos.vmdk' or one of the snapshot dis ...

  2. MFC-01-Chapter01:Hello,MFC---1.3 第一个MFC程序(02)

    1.3.1 应用程序对象 MFC应用程序的核心就是基于CWinApp类的应用程序对象,CWinApp提供了消息循环来检索消息并将消息调度给应用程序的窗口.当包含头文件<afxwin.h>, ...

  3. 010 winform

    2016-01-23 1.winform应用程序是一种智能客户端技术,我们可以使用winform应用程序帮助我们获得信息或者传输信息等. 2.属性Name:在后台要获得前台的控件对象,需要使用Name ...

  4. 课程笔记:——javascript中的预解释2

    in:检测某一个属性是否属于这个对象(既可以检测私有的属性,也可以检测公有的属性) --> attr in obj 1.不管条件是否成立,在预解释的时候,判断体中的带var和function的都 ...

  5. AngularJs的UI组件ui-Bootstrap分享(九)——Alert

    alert指令会在页面上显示一条提示消息,效果是这样: 代码为: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" ...

  6. dedecms qq咨询平均分配

    qq后台页: qq_admin.php <style type="text/css"> <!-- * {margin:0; padding:0;} .wrap { ...

  7. C++虚函数和虚函数表

    前导 在上面的博文中描述了基类中存在虚函数时,基类和派生类中虚函数表的结构. 在派生类也定义了虚函数时,函数表又是怎样的结构呢? 先看下面的示例代码: #include <iostream> ...

  8. 存储过程详解与java调用(转)

    存储过程的一些基本语法: --------------创建存储过程----------------- CREATE PROC [ EDURE ] procedure_name [ ; number ] ...

  9. Spark源码学习1.2——TaskSchedulerImpl.scala

    许久没有写博客了,没有太多时间,最近陆续将Spark源码的一些阅读笔记传上,接下来要修改Spark源码了. 这个类继承于TaskScheduler类,重载了TaskScheduler中的大部分方法,是 ...

  10. js 表单验证方法二

    function ckReight () { var pass = true; var new = $("#new"); if( new.find('input[name=name ...