首页 > 代码库 > Ionic2学习笔记

Ionic2学习笔记

2024-08-30 01:35:55   225人阅读

 

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学习笔记


联系
我们