ionic3的页面的三种跳转

第一次写，编辑的时候看着顺眼，发上来后有点乱。

假设从page first 跳转到 page second
（1）NavController
1.在first.ts中，先导入NavController，再注入到构造器中。

import { NavController } from 'ionic-angular';
class FirstPage { 
    constructor(public navCtrl: NavController) { }
}

2.然后导入要跳转到的页面，再定义跳转按钮触发的跳转方法,调用push方法跳转

import { SecondPage } from '../second/second';
class FirstPage { 
constructor(public navCtrl: NavController) { }
  goSecondPage(){
    this.navCtrl.push(SecondPage);
  }
}

3.在模板中写上按钮绑定事件：

<button ion-button (click)="goSecondPage()">跳转到second</button>

（2）[navPush]指令
同样，先导入SecondPage，然后定义一个变量，将SecondPage赋值给它。然后在模板中，向button添加[navPush]属性，绑定pushPage，实现跳转

import { SecondPage } from '../second/second';

class FirstPage {
  pushPage;
  constructor(){
    this.pushPage = SecondPage;
  }
}
模板中：
<button ion-button [navPush]="pushPage"></button>

（3）ModalController：
modal：一个覆盖整个屏幕的overlay，可认为是一个特殊的page。Modals不可重用。当一个modal被关闭（或覆盖）后，它将被毁灭（从堆栈中去除）。
比如，qq登录，你登录成功后，即使你隐藏了页面的返回按钮，安卓手机也是可以使用返回键跳回上一个页面的，那一按返回又退回了登录页面，这显然不是我们想要的，我们需要在登录后销毁页面。

import { ModalController } from 'ionic-angular';
import { SecondPage } from '../second/second';

 
@Component(...)
class FirstPage {
 constructor(public modalCtrl: ModalController) {}
 presentSecondPage () {
    let SecondPage = this.modalCtrl.create(SecondPage);
    SecondPage.present();
 } 
}

同样在模板中用button触发该方法。