首页 > 代码库 > Ionic2学习笔记
Ionic2学习笔记
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=http://www.mamicode.com/>{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=http://www.mamicode.com/‘one‘> >
设置了radio-group后,getRadio可获得选中值,radio-group为单选。
Segment:
<form [formGroup]=‘form‘> <ion-segment [formControlName] =‘"segment"‘> // 也可以使用<ion-segment [(ngModel)]=‘getSegment‘>将button的value连接到getSegment. <ion-segment-button value=http://www.mamicode.com/‘one‘ >one >
使用formGroup;可以直接使用this.form.form.get(‘segment‘).valueChanges来进行监听。
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学习笔记