溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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這兩個強大 的模塊,這兩個還有很多方法 ，大家要進一步學習，可以到官方文檔查看哦。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
