Angular 4.x Ionic3踩坑之Ionic 3.x介面傳值詳解

NO IMAGE

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

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

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

標籤上直接跳轉
Js跳轉

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這兩個強大 的模組,這兩個還有很多方法 ,大家要進一步學習,可以到官方文件檢視哦。

好了,以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,如果有疑問大家可以留言交流,謝謝大家對指令碼之家的支援。

您可能感興趣的文章:

利用Angular2 Ionic3開發IOS應用例項教程Angular 4.x Ionic3踩坑之Ionic3.x pop反向傳值詳解