美文网首页
Ionic3.x 中的路由导航NavController以及 路

Ionic3.x 中的路由导航NavController以及 路

作者: 奈何人别离 | 来源:发表于2018-09-17 23:28 被阅读0次

如果从页面A跳转到页面B并传参,有两种方法:

NavController 路由跳转传参

A.ts中的代码

this.navCtrl.push(ArticlePage , { 
  id: "123", 
  name: "Carl" 
});

B.ts
引入 NavParmas 模块

import { NavParams } from 'ionic-angular';
constructor(private navParams: NavParams) {
  let id = this.navParams.get('id'); 
  let name = this.navParams.get('name');
}

通过属性路由跳转传参

A页面定义数据

public pushPage:any;
  public params:any;

  constructor(public navCtrl: NavController) {
    this.pushPage = NewsPage;
    this.params = {msg:"传递的参数"};
  }

A.html中绑定跳转的页面和参数

<button ion-button [navPush]='pushPage' [navParams]='params'>跳转到news</button>

目标B页面得到数据

public text:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.text = this.navParams.get('msg');
  }

相关文章

网友评论

      本文标题:Ionic3.x 中的路由导航NavController以及 路

      本文链接:https://www.haomeiwen.com/subject/vyejnftx.html