穿越小说完本,欢乐颂,完美世界辰东

Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦翟斀?/h1>

2019-11-19 14:11:04

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

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

這里所說(shuō)的正向傳值指的是如有兩個(gè)頁(yè)面，我們簡(jiǎn)稱頁(yè)面A 和頁(yè)面B,正向指的是A跳轉(zhuǎn)到B,比如一個(gè)商品跳轉(zhuǎn)這個(gè)商品的詳情頁(yè)面。

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

標(biāo)簽上直接跳轉(zhuǎn)
Js跳轉(zhuǎn)

1) 標(biāo)簽上直接跳轉(zhuǎn)

Ionic3.x對(duì)Angular2以上的的路由進(jìn)一步封裝,路由跳轉(zhuǎn)主要是由模塊 NavController 來(lái)完成的,傳遞參數(shù)主要是由模塊 NavParams 來(lái)完成的,用法如下

A頁(yè)面內(nèi)容:

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

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

那B頁(yè)面要怎么獲取呢,看招：

B頁(yè)面內(nèi)容:

ts代碼

export class APage {public bPage:any;constructor(public navCtrl: NavController, public navParams: NavParams){  // 獲取A頁(yè)面?zhèn)鬟f過(guò)來(lái)的id  let id = this.navParams.get('id'); }}

獲取相對(duì)還是很容易!

2.Js跳轉(zhuǎn)

A頁(yè)面內(nèi)容:

htmll：代碼

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

ts代碼

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

B頁(yè)面獲取同上，這邊js跳轉(zhuǎn)主要是用NavControlller中的push方法，第一個(gè)參數(shù)為要跳轉(zhuǎn)的頁(yè)面，第二個(gè)參數(shù)的就是參數(shù)值，注意這是一個(gè)Json格式的對(duì)象。

總結(jié)

今天主要分享界面的正向傳值,其實(shí)主要?dú)w功了NavController和NavParams這兩個(gè)強(qiáng)大的模塊,這兩個(gè)還有很多方法，大家要進(jìn)一步學(xué)習(xí)，可以到官方文檔查看哦。

好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。

上一篇：vue頁(yè)面離開(kāi)后執(zhí)行函數(shù)的實(shí)例

下一篇：解決vue頁(yè)面刷新或者后退參數(shù)丟失的問(wèn)題