1.Ionic3.x中頁面(組件)之間正向傳值方式？

這里所說的正向傳值指的是如有兩個頁面，我們簡稱 頁面A 和 頁面B,正向指的是A跳轉到B,比如一個商品跳轉這個商品的詳情頁面。

正向傳值Ionic3.x主要有2種

1) 標簽上直接跳轉

Ionic3.x對Angular2以上的的路由進一步封裝,路由跳轉主要是由模塊 NavController 來完成的,傳遞參數主要是由模塊 NavParams 來完成的,用法如下

A頁面內容:

htmll：代碼

<button [navPush]="bPage" [navParams]="{id:'001'}"></button>

ts:代碼

import { BPage } from '../BPage';export class APage { public bPage:any; constructor(public navCtrl: NavController, public navParams: NavParams){    this.bPage = BPage; }}

注意:這邊 自己經常遇到一個問題就是我們申明，變量bPage的，可以有的教程就直接賦值，如
public bPage = BPage;我的問題是，我寫這種寫法點擊按鈕跳轉不了，所以我的解決的方法 是在構造函數里面賦值，這樣就可以解決啦!

那B頁面要怎么獲取 呢,看招：

B頁面內容:

ts代碼

export class APage {public bPage:any;constructor(public navCtrl: NavController, public navParams: NavParams){  // 獲取A頁面傳遞過來的id  let id = this.navParams.get('id'); }}

獲取相對還是很容易!

2.Js跳轉

A頁面內容:

htmll：代碼

<buttton (click)="goToBpage()"></button>

ts代碼

import { BPage } from '../BPage';export class APage { constructor(public navCtrl: NavController, public navParams: NavParams){ } // 跳轉方法 goToBpage(){   this.navCtrl.push(BPage,{'id':'0001'}) }}

B頁面獲取同上，這邊js跳轉主要是用NavControlller中的push方法，第一個參數為要跳轉的頁面，第二個參數的就是參數值，注意這是一個Json格式的對象。

總結

今天主要分享界面的正向傳值,其實主要歸功了NavController和NavParams這兩個強大 的模塊,這兩個還有很多方法 ，大家要進一步學習，可以到官方文檔查看哦。

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對錯新站長站的支持。