Ionic 2基础知识之导航

基本导航

所谓导航，是指从一个页面进入另一个页面，也可以返回。在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) { }
......

作者：西山侠客
链接：https://www.jianshu.com/p/54871fc4bba7