ionic3頁面間數(shù)據(jù)傳遞及Events

1.將數(shù)據(jù)傳遞到要跳轉(zhuǎn)到的頁面

(1)push()
要將新頁面推送到堆棧,可使用push方法斯撮。同時(shí)也可以通過將數(shù)據(jù)傳遞給push方法的第二個(gè)參數(shù),來將數(shù)據(jù)傳遞給下一個(gè)頁面。

import {LoginPage } from'./login';
pushPage(){this.navCtrl.push(LoginPage, { id: 123,name: "Carl"}
);

(2)[navParams]屬性:

import {LoginPage } from'./login';
@Component()
class MyPage {  params;  pushPage: any;  constructor()
{    this.pushPage= LoginPage;    
     this.params ={ id:123, name: "Carl"    }; 
}

然后在模板中跳轉(zhuǎn):

<button ion-button [navPush]="pushPage [navParams]="params">  Go</button>

(3)modal的create方法(與push()同理蛋褥,數(shù)據(jù)作為create()方法的第二個(gè)參數(shù))

import {LoginPage } from'./login';
presentLoginPage() { let modal =this.modalCtrl.create(LoginPage , 
 { id:123,
   name: "Carl"
} );
 modal.present();}

數(shù)據(jù)傳遞到下個(gè)頁面后,該頁面如何接收呢睛驳?
用NavParams來接收數(shù)據(jù)烙心。

首先導(dǎo)入NavParams ,然后注入到構(gòu)造函數(shù)乏沸。

import { NavParams } from 'ionic-angular'; 
constructor(public params: NavParams) {this.userInfo = params.data; }

這就可以得到整個(gè)對(duì)象淫茵。也可以使用params的get()方法接收,傳入對(duì)象屬性作為get()的參數(shù)

this.params.get('id');

則將得到:123

2.將數(shù)據(jù)傳遞到Tabs的頁面蹬跃,用[rootParams]屬性:

首先將數(shù)據(jù)按上方法傳遞到Tabs并接收(比如接收為userInfo)匙瘪,然后在Tabs模板中將數(shù)據(jù)傳遞到要傳遞的頁面:

<ion-tabs> 
<ion-tab [root]="tab1Root"  tabTitle="home" tabIcon="home"  [rootParams]="userInfo">  </ion-tab>
<ion-tab [root]="tab1Root"  tabTitle="home" tabIcon="home"  [rootParams]="userInfo">  </ion-tab>
</ion-tabs> 

加入[rootParams]屬性铆铆,將把數(shù)據(jù)userInfo傳遞到該頁面,然后在該頁面再用params接收即可丹喻。

3.使用Events發(fā)布訂閱事件:

上面所說的方法薄货,只能傳遞到要跳轉(zhuǎn)到的頁面。
如果要把數(shù)據(jù)傳遞到任何一個(gè)頁面碍论,使用Events谅猾,官網(wǎng)點(diǎn)這里

發(fā)布頁面:
import { Events } from 'ionic-angular';    //導(dǎo)入
export class EventsPage {  user = '來自Events的數(shù)據(jù)'   
constructor(public events: Events) {}  
 publishEvents(user) {    console.log('User created!') 
   this.events.publish('user:created',this.user, Date.now()
);    console.log(this.user) 
 }}
要接收數(shù)據(jù)的頁面(訂閱頁面):
import { Component} from '@angular/core';import { Events } from 'ionic-angular';

 @Component({  selector: 'page-home',  templateUrl: 'home.html'})

export class HomePage {  myEvent;  constructor(public events: Events) {   
 events.subscribe('user:created', (user, time) =>
 {      HomePage.prototype.myEvent = user;   
  }); 
 }}
訂閱必須再發(fā)布之前鳍悠,不然接收不到税娜。打個(gè)比喻:比如微信公眾號(hào),你要先關(guān)注才能接收到它的推文藏研,不然它再怎么發(fā)推文敬矩,你也收不到。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末蠢挡,一起剝皮案震驚了整個(gè)濱河市弧岳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌业踏,老刑警劉巖禽炬,帶你破解...
    沈念sama閱讀 217,734評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異堡称,居然都是意外死亡瞎抛,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門却紧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來桐臊,“玉大人,你說我怎么就攤上這事晓殊《闲祝” “怎么了?”我有些...
    開封第一講書人閱讀 164,133評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵巫俺,是天一觀的道長认烁。 經(jīng)常有香客問我,道長介汹,這世上最難降的妖魔是什么却嗡? 我笑而不...
    開封第一講書人閱讀 58,532評(píng)論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮嘹承,結(jié)果婚禮上窗价,老公的妹妹穿的比我還像新娘。我一直安慰自己叹卷,他們只是感情好撼港,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,585評(píng)論 6 392
  • 文/花漫 我一把揭開白布坪它。 她就那樣靜靜地躺著,像睡著了一般帝牡。 火紅的嫁衣襯著肌膚如雪往毡。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評(píng)論 1 302
  • 那天靶溜,我揣著相機(jī)與錄音开瞭,去河邊找鬼。 笑死墨技,一個(gè)胖子當(dāng)著我的面吹牛惩阶,可吹牛的內(nèi)容都是我干的挎狸。 我是一名探鬼主播扣汪,決...
    沈念sama閱讀 40,262評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼锨匆!你這毒婦竟也來了崭别?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,153評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤恐锣,失蹤者是張志新(化名)和其女友劉穎茅主,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體土榴,經(jīng)...
    沈念sama閱讀 45,587評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡诀姚,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,792評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了玷禽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片赫段。...
    茶點(diǎn)故事閱讀 39,919評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖矢赁,靈堂內(nèi)的尸體忽然破棺而出糯笙,到底是詐尸還是另有隱情,我是刑警寧澤撩银,帶...
    沈念sama閱讀 35,635評(píng)論 5 345
  • 正文 年R本政府宣布给涕,位于F島的核電站,受9級(jí)特大地震影響额获,放射性物質(zhì)發(fā)生泄漏够庙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,237評(píng)論 3 329
  • 文/蒙蒙 一抄邀、第九天 我趴在偏房一處隱蔽的房頂上張望耘眨。 院中可真熱鬧,春花似錦撤摸、人聲如沸毅桃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽钥飞。三九已至莺掠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間读宙,已是汗流浹背彻秆。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評(píng)論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留结闸,地道東北人唇兑。 一個(gè)月前我還...
    沈念sama閱讀 48,048評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像桦锄,于是被迫代替她去往敵國和親扎附。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,864評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容