ionic3之页面跳转的两种方式-yellowcong-蒲公英云

在ionic中，页面条状主要有两种方式，1、通过在界面中[navPush]="morePage"的方式，2、通过代码的方式跳转，绑定事件(click)="pushMorePage()",通过调用这个事件的同时，我们可以在这个里面添加参数的传递，主要依赖于 NavController,NavParams这两个组建

代码地址

https://gitee.com/yellowcong/ionic/tree/master/ionic3-param

界面跳转方式

home.ts

在这个界面中，我们导入了NavController ,这个东西可以控制界面的跳转，一般在界面跳转中，都是通过这个来进行界面跳转的，在初始化的时候，就会注入NavController。

import { Component } from '@angular/core';
//NavController就是用来管理和导航页面的一个controlle
import { NavController } from 'ionic-angular';
//导入more 的界面
import { MorePage } from '../more/more';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
//暴漏HomePage组建
export class HomePage {
  //定义一个属性
  morePage;
  //注入一个NavController的实例.
  constructor(public navCtrl: NavController) {
    this.morePage = MorePage;
  }
  //通过代码的方式跳转
  pushMorePage(){
    console.log("代码方式跳转");
    //跳转到指定页面
    this.navCtrl.push(MorePage);
  }
}

home.html

这个地方设定了两个跳转的方式，一个是通过界面的方式，还有一个是通过后台的pushMorePage()事件来跳转界面

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    测试界面
  </p>
  <!--跳转到morePage上面去-->
  <button ion-button [navPush]="morePage">界面方式跳转</button>
  <!--通过事件的方式-->
  <button ion-button (click)="pushMorePage()">代码方式跳转</button>
</ion-content>

参数传递

home.ts

参数传递和界面跳转，有一定联系，通过NavController.push进行界面的跳转，第二个参数，可以传递一个集合对象，将参数传递到下一个界面中。

import { Component } from '@angular/core';
//NavController就是用来管理和导航页面的一个controlle
import { NavController } from 'ionic-angular';
//导入more 的界面
import { MorePage } from '../more/more';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
//暴漏HomePage组建
export class HomePage {
  //定义一个属性
  morePage;
  //注入一个NavController的实例.
  constructor(public navCtrl: NavController) {
    this.morePage = MorePage;
  }
  //通过代码的方式跳转
  pushMorePage(){
    console.log("代码方式跳转");
    //跳转到指定页面， 后面的集合是一个参数
    this.navCtrl.push(MorePage,{
      title:'我是上一个界面搞来的'
    });
  }
}

more.ts

more.ts是跳转的目标界面，可以通过NavParams 这个对象，来接收前面界面传递过来的参数。然后可以通过NavController.pop()方法，退出当前的界面，反回到上一层。

//@angular/core是一个npm的模块，定义了angular的核心功能
import { Component } from '@angular/core';
//NavController就是用来管理和导航页面的一个controlle
//NavParams 这个是参数
import { NavController,NavParams } from 'ionic-angular';
@Component({
    //为页面指定选择器的名称
    //在ionic 3.x中规范为 page- 开头，为了不造成混乱，需要保持每个页面selector的唯一性
    //可以直接通过templateUrl 来引用html,而不直接使用template
    //模板的字符串，里面其实就是html代码
    //template: `<h1>Hello World!</h1>`
    //可以直接通过templateUrl 来引用html,而不直接使用template
    selector: 'page-more',
    templateUrl: 'more.html'
  })
//export关键词：将类暴露出去，以便其它的文件可以import到它。
//类的命名：在ionic3中，页面类采用页面名+Page的命名方式，首字母大写，如HomePage, ContactPage等。
export class MorePage {
  //声明传递进来的变量
  title:string;
  constructor(public navCtrl: NavController,public params:NavParams) {
    //获取传递过来的参数
    this.title=this.params.get('title');
    //当参数没有定义的情况
    if(this.title == undefined){
      this.title = "没有获取到结果";
    }
  }
  //返回到上一个界面
  pushHomePage(){
    this.navCtrl.pop();
  }
}