Angular2:发布publish和订阅subscribe
2017-11-22 本文已影响90人
Lucia_Huang
两个页面的传参可以通过navParam,但是这个在堆叠的页面之间使用比较方便,对于一些跨页面传参就可以试试通过发布和订阅去传递东西。有时候可能需要子级页面提交一些内容,返回父级页面可以看到对应的内容更新,那也可以试试发布和订阅。
1、首先,在发布内容的页面的ts文件头部和构造器声明Events:


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


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

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


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

有写的不对的地方欢迎大家留言评论,一起学习AngularJS。同时欢迎大家到我的个人主页听歌留言哦~