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组件间超越父子关系的相互通信的更多相关文章

  1. Qt 对象间的父子关系

    C++中只要有一个new就必须要有一个delete与之对应 但是Qt中的对象之间有特殊的关系 Qt 对象间的父子关系 每一个对象都保存有它所有子对象的指针 每一个对象都有一个指向其父对象的指针 par ...

  2. 7.QT-Qt对象间的父子关系

    Qt对象之间可以存在父子关系 继承于QObject类或者其子类的对象,都称为Qt对象 当指定Qt对象的父对象时 需要通过setParent()成员函数来设置对象间的父子关系 子对象将会把自己的指针地址 ...

  3. Prism 4 文档 ---第3章 管理组件间的依赖关系

     基于Prism类库的应用程序可能是由多个松耦合的类型和服务组成的复杂应用程序,他们需要根据用户的动作发出内容和接收通知进行互动,由于他们是松耦合的,他们需要一种方式来互动和交流来传递业务功能的需求. ...

  4. Vue_(组件通讯)非父子关系组件通信

    Vue单项数据流 传送门 Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信 ...

  5. Java awt组件间的继承关系

    Container的继承关系: Window是可独立存在的容器,其他则不行.

  6. vue-自主研发非父子关系组件之间通信的问题

    相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...

  7. 原创-angularjs2不同组件间的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...

  8. angularjs2 不同组件间的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...

  9. Vue基础:子组件抽取与父子组件通信

    在工作中承担一部分前端工作,主要使用Vue + Element UI. 随着版本迭代,需求增加,页面往往变得更加臃肿,不易维护.学习子组件的封装和抽取,能更好适应需求. 为什么需要子组件 可复用 将重 ...

随机推荐

  1. Canvas学习笔记——动画环境中的边界

    在动画中经常要处理边界问题,比如一个物体运动到了边界,要怎么处理才合适呢?通常有几种以下几种方式: 让物体消失 // > 16 & 0xff, g = color >> 8 ...

  2. UVA - 11827 - Maximum GCD,10200 - Prime Time (数学)

    两个暴力题.. 题目传送:11827 Maximum GCD AC代码: #include <map> #include <set> #include <cmath> ...

  3. java 多线程2(转载)

    http://www.cnblogs.com/DreamSea/archive/2012/01/11/JavaThread.html Ø线程的概述(Introduction) 线程是一个程序的多个执行 ...

  4. linux中vi编辑器(转载)

    三种模式相互切换 在命令终端输入vi进入vi编辑器. 命令模式:进入编辑器即进入命令模式, 输入模式:在命令模式下输入“i ”进入输入模式: 末行模式:按“:”进入末行模式: 在输入模式切换至末行模式 ...

  5. Nmap扫描教程之基础扫描具体解释

    Nmap扫描教程之基础扫描具体解释 Nmap扫描基础扫描 当用户对Nmap工具了解后,就可以使用该工具实施扫描.通过上一章的介绍,用户可知Nmap工具能够分别对主机.port.版本号.操作系统等实施扫 ...

  6. RabbitMQ 内存和磁盘警告

    内存和磁盘警告 有两种情况下,Rabbit MQ会停止读取客户端的连接socket,为了防止crash崩溃,这两种情况是: 内存使用达到配置值 磁盘空间下降到配置值下 在这两种情况下,服务器会临时阻塞 ...

  7. sanic官方文档解析之Example(二)

    1,通过docker部署sanic项目 通过Docker和Docker Compose部署SANIC应用程序是一项很容易实现的任务,下面的示例提供了示例simple_server.py的部署 FROM ...

  8. Chef vs Puppet vs Ansible vs Saltstack: Which Works Best For You?

    Ansible vs SaltStack 谁才是自动化运维好帮手? - CSDN博客 https://blog.csdn.net/a105421548/article/details/53558598 ...

  9. TWinControl、TCustomControl和TGraphicControl对WM_PAINT消息的三种不同处理(虚函数的特点就是升升降降)

    -------------------- TWinControl收到WM_Paint消息(以后找个例子)-------------------- 1. 消息函数 TWinControl.WMPaint ...

  10. 对ShortCut和TWMKey的研究

    TWMKey = packed record Msg: Cardinal; CharCode: Word; Unused: Word; KeyData: Longint; Result: Longin ...