Ionic 2基础知识之导航

作者: 西山侠客 | 来源:发表于2017-03-03 12:53 被阅读1554次

    基本导航

    所谓导航,是指从一个页面进入另一个页面,也可以返回。在Ionic 2中,我们使用NavController来实现导航。下面通过一个实例来说明:
    1.新建一个空的Ionic 2项目navigation:
    ionic start navigation blank --v2 --skip-npm
    cnpm install //根据package.json,安装依赖模块
    2.增加一个新的页面Second,我们要做的就是从Home页进入到Second页:
    ionic g page Second
    这样,我们可以看到在src/pages目录下增加了一个新的目录second,其中包括三个文件,分别是second.html、second.scss和second.ts。
    3.修改src/app/app.module.ts文件,将新增加的页面加入进去:

    import { NgModule, ErrorHandler } from '@angular/core';
    import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
    import { MyApp } from './app.component';
    import { HomePage } from '../pages/home/home';
    import { SecondPage } from '../pages/second/second'; //新增加的
    
    @NgModule({
      declarations: [
        MyApp,
        HomePage,
        SecondPage //新增加的
      ],
      imports: [
        IonicModule.forRoot(MyApp)
      ],
      bootstrap: [IonicApp],
      entryComponents: [
        MyApp,
        HomePage,
        SecondPage  //新增加的
      ],
      providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
    })
    export class AppModule {}
    

    尤其要注意,每当增加一个页面时,都要修改app.module.ts文件中的三个地方:import、declarations和entryComponents。
    4.修改src/pages/home目录中的home.html文件,增加一个按钮:

    <ion-header>
      <ion-navbar>
        <ion-title>
          导航演示
        </ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content padding>
      <button ion-button color="primary" (click)="myNavigation()">导航</button>
    </ion-content>
    

    5.修改src/pages/home目录中的home.ts文件,添加按钮单击函数:

    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';
    import { SecondPage } from '../second/second';  //新增加的
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      constructor(public navCtrl: NavController) { }
      myNavigation(){ //新增加的按钮单击函数
        this.navCtrl.push(SecondPage);
      }
    }
    

    这样,我们就完成了一个最简单的页面之间的导航,在home页面单击"导航"按钮,就进入了第二个页面,并且有一个back按钮,单击它,就可以返回到home页面。

    页面之间传递数据

    我们通过NavParams进行页面之间的数据传递。修改上一个例子,在home页中,添加两个输入框,分别用来输入用户名和密码,点击提交按钮后,将输入框中输入的内容传递给下一个页面,并在页面中显示出来。
    home.html代码:

    <ion-header>
      <ion-navbar>
        <ion-title>
          传递数据
        </ion-title>
      </ion-navbar>
    </ion-header>
    
    <ion-content padding>
      <ion-list>
        <ion-item>
          <ion-label fixed>用户名</ion-label>
          <ion-input [(ngModel)]="username" type="text" value=""></ion-input>
        </ion-item>
        <ion-item>
          <ion-label fixed>密码</ion-label>
          <ion-input [(ngModel)]="password" type="password"></ion-input>
        </ion-item>
      </ion-list>
      <button ion-button color="primary" (click)="ok()">提交</button>
    </ion-content>
    

    home.ts代码:

    import { Component } from '@angular/core';
    
    import { NavController } from 'ionic-angular';
    import { SecondPage } from '../second/second';
    
    @Component({
      selector: 'page-home',
      templateUrl: 'home.html'
    })
    export class HomePage {
      username:any;
      password:any;
      constructor(public navCtrl: NavController) { }
      ok(){
        this.navCtrl.push(SecondPage,{
            username:this.username,
            password:this.password
        });
      }
    }
    

    second.html代码:

    <ion-header>
      <ion-navbar>
        <ion-title>得到数据</ion-title>
      </ion-navbar>
    </ion-header>
    <ion-content padding>
      <ion-list>
        <ion-item>
          <strong>用户名是:</strong>{{username}}
        </ion-item>
        <ion-item>
          <strong>密码是:</strong>{{password}}
        </ion-item>
      </ion-list>
    </ion-content>
    

    second.ts代码:

    import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    @Component({
      selector: 'page-second',
      templateUrl: 'second.html'
    })
    export class SecondPage {
      username:any;
      password:any;
      constructor(public navCtrl: NavController, public navParams: NavParams) {}
      ionViewDidLoad() {
        this.username=this.navParams.get('username');   
        this.password=this.navParams.get('password');  
      }
    }
    

    导航部件

    modals:模态窗口

    在web开发中,模态窗口是经常使用的。尤其是当用户仅仅需要打开一个窗口,输入所需要的信息,然后关闭该窗口,而不需要再点击返回按钮返回到上一个页面。
    对于模态窗口,我们需要掌握的是当窗口关闭时,如何将数据传递回去?这就要用到ModalController。下面用实例说明:
    1.增加一个新的页面modal,执行下面的命令:
    ionic g page modal
    这样,我们在src/pages目录下可以看到新增加了一个目录modal,其中包括三个文件:modal.html、modal.scss和modal.ts。
    2.修改app.module.ts,将modal页面添加进去,同样要注意修改三个地方:import、declarations和entryComponents。
    3.修改home.html,新添加一个按钮,用来打开modal这个模态窗口,并且从模态窗口传递数据进来。

        <ion-item>
          <strong>模态窗口传过来的描述信息:</strong>{{description}}
        </ion-item>
    ......
      <button ion-button color="secondary" (click)="modal()">模态</button>
    ......
    

    4.修改home.ts,引入ModalController,并在构造函数中增加对modalCtrl的定义,然后增加modal()函数:

    import { NavController,ModalController } from 'ionic-angular';
    ......
    constructor(public navCtrl: NavController,public modalCtrl:ModalController) { }
    ......
    
    

    相关文章

      网友评论

      本文标题:Ionic 2基础知识之导航

      本文链接:https://www.haomeiwen.com/subject/phwlgttx.html