ionic3 页面间切换、跳转的数据传递以及Events事件

版权声明：志远有18CM https://blog.csdn.net/qq_33182954/article/details/79898924

ionic 页面跳转使用的几种方式

navCtrl.push 函数

import {LoginPage } from'./login';
...
pushPage(){
    this.navCtrl.push(LoginPage, {
      id: 123,
      name: "Carl"
});

navParams 属性

import {LoginPage } from'./login';
...
@Component()
class MyPage {
  params;
  pushPage: any;
  constructor(){
    this.pushPage= LoginPage;
    this.params ={ 
      id:123,
      name: "Carl"
    };
  }
}

Modal的create方法

import {LoginPage } from'./login';
...
presentLoginPage() {
 let modal =this.modalCtrl.create(LoginPage ,
     { id:123,name: "Carl"}
 );
 modal.present();
}

页面数据接收

用 NavParams 来接收数据，首先导入NavParams ，然后注入到构造函数。

import { NavParams } from 'ionic-angular';
 ...
userInfo;
constructor(public params: NavParams) {
       this.userInfo = params.data;
}

也可以使用 navParams 的get()方法接收，传入对象属性作为get()的参数

this.navParams.get('name')

1. 其他参考详情：页面间数据传递
2. 关注我的项目：可可DJ音乐网