美文网首页Angular.js专场Web前端之路
Angular2:发布publish和订阅subscribe

Angular2:发布publish和订阅subscribe

作者: Lucia_Huang | 来源:发表于2017-11-22 11:51 被阅读90次

两个页面的传参可以通过navParam,但是这个在堆叠的页面之间使用比较方便,对于一些跨页面传参就可以试试通过发布和订阅去传递东西。有时候可能需要子级页面提交一些内容,返回父级页面可以看到对应的内容更新,那也可以试试发布和订阅。

1、首先,在发布内容的页面的ts文件头部和构造器声明Events:

声明Events.png 构造器引用Events.png

2、在发布内容的页面使用publish:“UPDATE”类似发布页面的一个信号,"天气转凉,注意保暖"是发布的信息,下面的getDynamic()是一个点击事件的方法:

发布信息.png 点击事件.png

3、订阅页面的ts也需要和第一步一样,在头部和构造器声明Events;
4、在订阅页面ts的构造内用subscribe接收信息:“UPDATE”接收信号,要与发布的信号相同,(update)是接收的信息:

订阅信息.png

5、在订阅的页面输出上一步骤的info:

输出订阅到的信息.png 输出订阅到的信息.png

我其实是在发布信息的页面(子页面),点击事件返回上一个页面(父页面),但是父级页面数据没有刷新,除了用output的方法,还可以用发布订阅的方法。当子页面发布信息,返回到父级页面的时候,父级页面订阅到信息,就会运行接口的方法,重新get后台数据。如下图:

使用subscribe刷新页面数据.png
有写的不对的地方欢迎大家留言评论,一起学习AngularJS。同时欢迎大家到我的个人主页听歌留言哦~

相关文章

网友评论

本文标题:Angular2:发布publish和订阅subscribe

本文链接:https://www.haomeiwen.com/subject/gblnvxtx.html