Component

nav:

  1. <ion-nav [root] = 'rootComponent'></ion-nav>
  2. ....
    import {Nav} from 'ionic-angular';
    ....
  3. export class AppComponent{
  4.   @ViewChild(Nav) private nav:Nav;
  5.   push(){
  6.     nav.push(PageOne,{id:1,name:'ztw'});
  7.   }  
  8. }
  9.  
  10. @Component({template:`<p>{{show}}</p><button (click)='goBack()'> back</button>`})
  11. export class PageOne{
  12.   show:string
  13.   constructor(
  14.     private:navParams:NavParams,
  15.     private:navCtrl:NavController     
  16.     ){}
  17.   ngOnInit(){
  18.     let name:string=navParams.get(name);
  19.     let id:number=+navParams.get(id);
  20.     this.show=`name : ${name} , id: ${id}`;
  21.   };
  22.   goBack(){
  23.     this.navCtrl.pop(); //this.navCtrl.popToRoot(); 回到root
  24.   }
  25. }
  1. 可以通过@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:

  1. <ion-menu [content]='content' silde='right' id='authenticated'>
  2. <button menuClose> close</button>
  3. <button menuOpen>open</button>
      <button menuToggle>toggle</button>
  4. </ion-menu>
    <ion-menu silde='left' id='unauthenticated'> </ion-menu>
  5. <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 ;使用:

  1. this.viewCtrl.didEnter.subscribe(val=>{console.log('didEnter')});

  事件:

      onDidDismiss();OnWillDismiss();

  方法:

      dismiss();

      .....

 alerts:

 

  1. let alertCtrl=new AlertController();
  2. alertCtrl.create({
  3. title:'alert msn',
  4. message:' msn'
  5. buttons:[
  6. {text:' ok' ,
  7. hanlder:data=>{console.log(data)},
        
  8. }] ,
  9. inputs:[
  10. {type:'text',name:'name',placeholder:'account'},
  11. ]
  12. })

  类似于绑定了一个#form='ngForm' 或者 [fromGroup]='form';

  而每个button的hanlder中返回的data,则为form.value;

 Config:

  

  1. import {IonicModule} from 'ionic-angular';
  2.  
  3. @NgModule({
  4.  
  5. imports:[
  6. IonicModule.forRoot(MyApp,opt,DeepLinkers)
  7. ]
  8. })

  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:

  1. ...
  2. template:`
  3. <ion-content>
  4. <ion-list><ion-item></ion-item></ion-list>
  5. <ion-infinite-scroll (ionInfinite)='do($event)'>
  6. <ion-infinite-scroll-content loadingSpinner='' loadingText=''>
          //<ion-refresh-content refreshSpinner='' refreshText=''></..>
  7.  
  8. </ion-infinite-scroll-content>
  9. </ion-infinite-scroll>
  10. </ion-content>
  11. `
  12. ......
  13. export class Page{
  14. .......
  15. do(inifinate){
  16. if(end) return inifinate.enable(false);
  17. Http.get(...);
  18. inifinate.complate();
  19. }
  20. }

  ion-infinite-scroll-content:控制载入等待时的样式;

没有data可供加载时,使用inifinate.enable(false),使其失效。

refresher使用方法大致相同,用于向上刷动。

 RadioGroup:

  

  1. <ion-list radio-group [(ngModel)]='getRadio'>
  2. <ion-item>
  3. <ion-label> one</ion-label>
  4. <ion-radio value='one'> </ion-radio>
  5. </ion-item>
  6. </ion-list>

  设置了radio-group后,getRadio可获得选中值,radio-group为单选。

Segment:

  1. <form [formGroup]='form'>
  2. <ion-segment [formControlName] ='"segment"'> // 也可以使用<ion-segment [(ngModel)]='getSegment'>将button的value连接到getSegment.
  3.  
  4. <ion-segment-button value='one' >one </..>
  5. <ion-segment-button value='two'>two </..>
  6. </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:

 
  1. <ion-item-sliding #slide (ionDrag)='drag($event)'>
  2. <ion-item-option icon-left (ionSwipe)='Swiped()'>
  3. <button item-button (click)='close(slide)'>
  4. <item-icon name='archive'></item-con>
  5. button
  6. </button>
  7. </ion-item-option>
  8.  
  9. export class Test{
  10. subject:any;
  11. ngOnInit(){
  12. this.subject=Subject.thrrotleTime(300).subscribe(val=>{console.log(val)})
  13. }
  14.     drag(e){
  15. this.subject.next(e.getSlidingPercent()); //获得item-sliding的滑动范围。
  16. }
  17. close(node){
  18. node.close() //关闭item-sliding
  19. }
  20. }

  

  方法.close();

  事件:ionDrag();

    <ion-item-option> :ionSwipe(); //滑动成功时触发。

ionReorder:不建议使用。

Ionic2学习笔记的更多相关文章

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

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5575843.html 时间:6/11/2016     说明: 在本文发表的时候(2016-06-1 ...

  2. Ionic2学习笔记(9):访问本地设备

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5559927.html               Ionic2提供了访问本地设备的方法,但是需要安装 ...

  3. Ionic2学习笔记(8):Local Storage& SQLite

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5557947.html              Ionic2可以有两种方式来存储数据,Local S ...

  4. Ionic2学习笔记(7):Input

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5554610.html           我们先来看一个简单的输入用户名和密码点击登录的界面:   ...

  5. Ionic2学习笔记(6):Navigation

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5551535.html           Ionic2中创建一个页面很方便,在页面之间相互切换也很方 ...

  6. Ionic2学习笔记(5):Provider

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5547646.html             Provider是一种为App提供数据源的方式, 举个 ...

  7. Ionic2学习笔记(0):HelloWorld

    作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5529153.html 操作系统: Windows 10 环境配置: Node.js Java SE D ...

  8. Ionic2学习笔记(4):*号

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5544479.html                     大家常常会在ionic2页面中见到*号 ...

  9. Ionic2学习笔记(3):Pipe

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5538630.html Pipe类似过滤器,比如,在一个字符串要展现在页面之前, 我们需要对这个字符串 ...

  10. Ionic2学习笔记(2):自定义Component

    作者:Grey 原文地址: http://www.cnblogs.com/greyzeng/p/5536298.html                     上一篇提到,Ionic2提供了很多Co ...

随机推荐

  1. SpringMVC与MyBatis整合(一)——查询人员列表

    从今天开始,一点点的记录做毕设和学习的过程. 寒假才开始接触SpringMVC和MyBatis,之前对框架的概念理解并不到位,也没学过Spring.目前学习起来思路并不很清晰,有些东西我还不能理解,只 ...

  2. 高斯过程(gaussian process)

    Definition 1. A Gaussian Process is a collection of random variables, any finite number of which hav ...

  3. js动画之多物体运动

    多个物体这不能使用一个定时器了,要给每个物体一个定时器 <!DOCTYPE html> <html lang="en"> <head> < ...

  4. Unbalanced calls to begin/end appearance transitions for **

    在自定义UITabBarController中点击视图跳转的时候,有可能就出现这个问题, 解决方法就是在自定义的UITabBarController中的视图显示消失通知方法中添加如下方法: - (vo ...

  5. c语言实现牛顿迭代法

    #include<stdio.h> #include<stdlib.h> #include<math.h> #include<float.h> #inc ...

  6. SoapUI中如何获取当前active环境

    // Get the current selected Environment def activeEnv = testRunner.testCase.testSuite.project.getAct ...

  7. C# 水印透明度图片

    /// <summary> /// 在一张图片的指定位置处加入一张具有水印效果的图片 /// </summary> /// <param name="Sourc ...

  8. suspend

    两个线程的run方法同时调用一个加了同步锁的方法,如果一个线程使用了suspend方法,那么会独占并且锁死这个同步方法,别的线程就永远没有办法进入这个线程了. 特别的是,在main方法中,调用一个线程 ...

  9. Linux安装FTP服务

    转自:http://blog.csdn.net/huangbiao86/article/details/6641952 ftp服务器 1.  在Linux和其他机器之间共享文件(在linux下安装ft ...

  10. Oracel查询根据部分字段去重复

    一般一个表的id是唯一的,如果除去id则会有重复数据,有时做项目时查询要求根据某几个字段去掉重复记录,并且查询保留id 以下是Oracel查询时根据部分字段去重复,例如,查询的字段包括id,Sys,C ...