ionic3 页面跳转

ionic3 页面跳转的两种方式

（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触发该方法。

将参数传递给下一个页面

为push函数添加第二个参数

假设我们要为TestPage传入一个标题，用来显示到页面上，我们为push方法传入一个对象。

 pushTestPage(){
    this.navCtrl.push(TestPage,{
        title:'没有人可以比我帅'
    });
  }

引入NavParam并使用

利用NavParams的get方法，可以将传进来的页面参数读取出来。
切换到 test.ts，完成三个步骤
1.引入NavParams并，并在构造函数添加注入语句
2.为TestPage类添加title属性，读取参数并赋给title
3.将title输出到模板中

• 文件 test.ts

import { Component } from '@angular/core'

import { NavParams } from 'ionic-angular' //step1

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string; //step2

    constructor(public params:NavParams){ //step1
        this.title=this.params.get('title'); //step2
    }
}

手动返回上一页

以使用NavController的pop方法来实现。

this.navCtrl.pop();

• 文件 test.ts

import { Component } from '@angular/core'

//注意这里
import { NavController, NavParams } from 'ionic-angular'

@Component({
    selector: 'page-test',
    templateUrl:'./test.html'
})
export class TestPage {

    title:string;

    //注意这里
    constructor(public navCtrl:NavController,public params:NavParams){
        this.title=this.params.get('title');
    }

    //新方法
    popPage(){
        this.navCtrl.pop();
    }
}