RXJS组件间超越父子关系的相互通信

简介: RXJS组件间超越父子关系的相互通信用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化实例化RXJS的subject对象import { Injectable } from '@angular/core';import { Subject }...

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);
    }
 });

作者:承蒙时光
出处:http://www.cnblogs.com/timetimetime/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
消息中间件 存储 缓存
如何设计各个组件之间的交互行为?
如何设计各个组件之间的交互行为?
|
JavaScript
【Vue3从零开始-第三章】3-5 父子组件之间事件通信
【Vue3从零开始-第三章】3-5 父子组件之间事件通信
2009 0
【Vue3从零开始-第三章】3-5 父子组件之间事件通信
|
14天前
|
存储 JavaScript
组件间通信的方式有哪些优劣势
组件间通信方式多样,包括直接引用、事件触发、状态管理等。直接引用简单直观但耦合度高;事件触发灵活解耦但过度使用会增加调试难度;状态管理适用于复杂应用,维护全局状态,但学习成本较高。
|
5月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
6月前
|
存储 编译器 C语言
C与C++之间相互调用的基本方法
C与C++之间相互调用的基本方法
121 1
|
6月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
45 0
组件之间传值通讯之父传子
组件之间传值通讯之父传子
|
存储 Web App开发 前端开发
💞💞💞SharedWorker 让你多个页面相互通信
SharedWorker 是一个新的Web Worker API,它允许你在多个页面之间共享一个Worker。 SharedWorker 代表一种特定类型的Worker,可以在多个浏览器上下文中运行,
240 0
💞💞💞SharedWorker 让你多个页面相互通信
|
Android开发
浅谈组件之间的通信—EventBus
EventBus是一款针对Andoid优化的发布/订阅事件总线,主要功能是替Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间传递消息,优点是开销小,代码更优雅,以及将发送者和接收者进行解耦
136 0
|
资源调度 前端开发 数据格式
React 组件之间到底是如何进行通讯的?
​ 组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能拆分成多个组件,以更好地完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。
90 1