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>Homeion-title>
  ion-navbar>
ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!h2>
  <p>
    测试界面
  p>
  
  <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: `
Hello World!
`
    //可以直接通过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();
  }
}

运行效果

参数代码的传递，我这个地方的做法是后台设置

界面跳转原理

所有的界面像栈一样，画面不断的进入，就不断的增加，新的画面把旧的画面给盖住了

退出的时候，使用pop函数，退出界面，释放内存

TabsPage

这个比较的特殊，一个TabsPage里面，包含了多个tab ，而每个tab都有一个单独的界面栈，在tab之间切换的时候，看到的都是每个tab的最上面一个界面。

参考文章

https://www.jianshu.com/p/de40aeb3d371