Angular2:發(fā)布publish和訂閱subscribe

兩個頁面的傳參可以通過navParam,但是這個在堆疊的頁面之間使用比較方便,對于一些跨頁面?zhèn)鲄⒕涂梢栽囋囃ㄟ^發(fā)布和訂閱去傳遞東西。有時候可能需要子級頁面提交一些內(nèi)容,返回父級頁面可以看到對應的內(nèi)容更新,那也可以試試發(fā)布和訂閱。

1、首先,在發(fā)布內(nèi)容的頁面的ts文件頭部和構造器聲明Events:

聲明Events.png
構造器引用Events.png

2、在發(fā)布內(nèi)容的頁面使用publish:“UPDATE”類似發(fā)布頁面的一個信號,"天氣轉涼,注意保暖"是發(fā)布的信息,下面的getDynamic()是一個點擊事件的方法:

發(fā)布信息.png
點擊事件.png

3、訂閱頁面的ts也需要和第一步一樣,在頭部和構造器聲明Events;
4、在訂閱頁面ts的構造內(nèi)用subscribe接收信息:“UPDATE”接收信號,要與發(fā)布的信號相同,(update)是接收的信息:

訂閱信息.png

5、在訂閱的頁面輸出上一步驟的info:

輸出訂閱到的信息.png
輸出訂閱到的信息.png

我其實是在發(fā)布信息的頁面(子頁面),點擊事件返回上一個頁面(父頁面),但是父級頁面數(shù)據(jù)沒有刷新,除了用output的方法,還可以用發(fā)布訂閱的方法。當子頁面發(fā)布信息,返回到父級頁面的時候,父級頁面訂閱到信息,就會運行接口的方法,重新get后臺數(shù)據(jù)。如下圖:

使用subscribe刷新頁面數(shù)據(jù).png

有寫的不對的地方歡迎大家留言評論,一起學習AngularJS。同時歡迎大家到我的個人主頁聽歌留言哦~

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容