Ionic3.x 中的路由導(dǎo)航NavController以及 路由傳值

如果從頁面A跳轉(zhuǎn)到頁面B并傳參,有兩種方法:

NavController 路由跳轉(zhuǎn)傳參

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');
}

通過屬性路由跳轉(zhuǎn)傳參

A頁面定義數(shù)據(jù)

public pushPage:any;
  public params:any;

  constructor(public navCtrl: NavController) {
    this.pushPage = NewsPage;
    this.params = {msg:"傳遞的參數(shù)"};
  }

A.html中綁定跳轉(zhuǎn)的頁面和參數(shù)

<button ion-button [navPush]='pushPage' [navParams]='params'>跳轉(zhuǎn)到news</button>

目標(biāo)B頁面得到數(shù)據(jù)

public text:any;
  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.text = this.navParams.get('msg');
  }
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 用兩張圖告訴你,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料? 從這篇文章中你...
    hw1212閱讀 13,987評論 2 59
  • 一、SPA的概念 首先明確一個概念,SPA,全稱為Single Page Application單頁應(yīng)用,一個單頁...
    耦耦閱讀 6,070評論 0 3
  • 一、環(huán)境確認(rèn) 1、確認(rèn)網(wǎng)絡(luò)可用 登錄服務(wù)器后執(zhí)行:ping www.baidu.com 2、確認(rèn)y...
    xuanxiao閱讀 325評論 0 0
  • 第一章~兒童帶著什么來到這個世界 嬰幼兒早期的發(fā)展規(guī)律跟有些動物類似。比如蝴蝶,母蝶通常將卵產(chǎn)在樹杈中間,幼蝶剛出...
    愛蓮說Alice閱讀 4,804評論 0 1
  • 初體驗,從開始啟動那會,就陷入一種莫名慌亂的感覺中,剛開始我以為是人員較多的緣故,但后來仔細(xì)想想更多的是自己對自己...
    Silly陳閱讀 559評論 0 0

友情鏈接更多精彩內(nèi)容