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:不建议使用。