RXJS组件间超越父子关系的相互通信
RXJS组件间超越父子关系的相互通信
用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化
实例化RXJS的subject对象
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
/**
* 事件总线,组件之间可以通过这个服务进行通讯
*/
@Injectable()
export class EventBusService {
public maintenance: Subject <any> = new Subject<any>();
constructor() { }
}
这里通过一个对象类,封装了,可以单独写
在组件A中发送数据流
this.maintenanceService.getFlowChart(data.status).subscribe(res => {
this.eventBusService.maintenance.next(res);
});
在组件B监听数据流的变化,并接收数据流
this.eventBusService.maintenance.subscribe((data) => {
if (data) {
alert(data);
}
});
RXJS组件间超越父子关系的相互通信的更多相关文章
- Qt 对象间的父子关系
C++中只要有一个new就必须要有一个delete与之对应 但是Qt中的对象之间有特殊的关系 Qt 对象间的父子关系 每一个对象都保存有它所有子对象的指针 每一个对象都有一个指向其父对象的指针 par ...
- 7.QT-Qt对象间的父子关系
Qt对象之间可以存在父子关系 继承于QObject类或者其子类的对象,都称为Qt对象 当指定Qt对象的父对象时 需要通过setParent()成员函数来设置对象间的父子关系 子对象将会把自己的指针地址 ...
- Prism 4 文档 ---第3章 管理组件间的依赖关系
基于Prism类库的应用程序可能是由多个松耦合的类型和服务组成的复杂应用程序,他们需要根据用户的动作发出内容和接收通知进行互动,由于他们是松耦合的,他们需要一种方式来互动和交流来传递业务功能的需求. ...
- Vue_(组件通讯)非父子关系组件通信
Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...
- Java awt组件间的继承关系
Container的继承关系: Window是可独立存在的容器,其他则不行.
- vue-自主研发非父子关系组件之间通信的问题
相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...
- 原创-angularjs2不同组件间的通信
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...
- angularjs2 不同组件间的通信
AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...
- Vue基础:子组件抽取与父子组件通信
在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...
随机推荐
- VB.NET版机房收费系统—数据库设计
之前第一遍机房收费的时候,用的数据库是别人的.认知也仅仅能建立在别人的基础上,等自考中<数据库系统原理>这本书学完了之后,再去看曾经的数据库,发现数据库真的还须要进一步的优化.以下是我设计 ...
- iOS8 PUSH解决方法
本文转载至 http://blog.csdn.net/pjk1129/article/details/39548523 - (void)registerForRemoteNotificatio ...
- Vue使用axios
main.js------------------- import axios from "axios"; import qs from "qs"; imp ...
- Mac下eclipse的快捷键
一.Command类 Command+1 快速修复 Command+d 删除当前行 Command+Option+↓ 复制当前行到下一行 Command+Option+↑ 复制当前行到上一行 Comm ...
- target!
工作到现在也有8个月了,从学生时代想从事嵌入是开发,到工作中从事android开发,跨度还是比较大的:曾经想从事这些消费类电子产品的开发,想从一个用户变成一个生产者,但是真正进入到这一行之后,才知道在 ...
- [zjoi]青蛙的约会_扩展欧几里德
两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝着对方那里跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有问清楚 ...
- poj3349 Snowflake Snow Snowflakes —— 哈希表
题目链接:http://poj.org/problem?id=3349 题意:雪花有6个瓣,有n个雪花,输入每个雪花的瓣长,判断是否有一模一样的雪花(通过旋转或翻转最终一样,即瓣长对应相等).如果前面 ...
- Codeforces Round #373 (Div. 2) C. Efim and Strange Grade —— 贪心 + 字符串处理
题目链接:http://codeforces.com/problemset/problem/719/C C. Efim and Strange Grade time limit per test 1 ...
- PS 图像滤镜— — USM 锐化
这个算法的原理很简单,就是先用高斯模糊获取图像的低频信息,然后用原图减去高斯模糊之后的图,得到图像的高频信息,再将原图与高频信息融合,进一步增强原图的高频信息,看起来,图像的边缘显得特别的sharp. ...
- poj3565Ants——KM算法
题目:http://poj.org/problem?id=3565 首先,我们神奇地发现,没有相交边的匹配可以转化为距离和最小的匹配,所以可以使用KM算法求带权匹配: 要求的是距离和最小,所以把边权转 ...