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=>{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:不建議使用。