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 父子组件之间事件通信
2071 0
【Vue3从零开始-第三章】3-5 父子组件之间事件通信
|
1月前
|
设计模式 供应链 安全
【再谈设计模式】中介者模式 - 协调对象间交互的枢纽
中介者模式定义了一个中介对象来封装一组对象之间的交互方式。中介者使得各对象之间不需要显式地相互引用,从而降低了它们之间的耦合度。它通过将对象之间的交互逻辑集中到中介者对象中,使得系统的结构更加清晰,易于维护和扩展。
54 18
【再谈设计模式】中介者模式 - 协调对象间交互的枢纽
|
7月前
|
存储 JavaScript 前端开发
如何在组件化中实现组件之间的通信
【8月更文挑战第13天】如何在组件化中实现组件之间的通信
88 3
|
10月前
|
算法 程序员 编译器
C++与C的对比:理解两者之间的异同与选择
C和C++是两种广泛使用的编程语言,都提供底层访问能力和指针操作,适合高效底层编程。C++是面向对象的,支持类和对象,提供异常处理、丰富的标准库和更强的类型系统;而C语言面向过程,无内置异常处理,标准库较简单,编译速度快。选择使用哪种语言应考虑项目需求、团队熟悉度和性能要求。C++常用于游戏开发、桌面应用和高性能场景;C则在系统级编程、嵌入式系统和性能敏感应用中占优。
|
10月前
|
存储 编译器 C语言
C与C++之间相互调用的基本方法
C与C++之间相互调用的基本方法
168 1
|
10月前
|
设计模式 前端开发 数据处理
MVC架构中,控制器和模型之间是如何交互的
MVC架构中,控制器和模型之间是如何交互的
111 0
|
10月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
59 0
|
10月前
|
设计模式
二十三种设计模式全面解析-解密中介者模式:构建灵活的通信桥梁
二十三种设计模式全面解析-解密中介者模式:构建灵活的通信桥梁
组件之间传值通讯之父传子
组件之间传值通讯之父传子