Ionic2学习笔记

Posted Jnew

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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来进行监听。

 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学习笔记的主要内容,如果未能解决你的问题,请参考以下文章

Ionic2学习笔记

Ionic2学习笔记:访问本地设备

Ionic2学习笔记:NAVIGATION

Ionic2学习笔记:Local Storage& SQLite

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

Ionic2学习笔记:Provider