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 父子组件之间事件通信
2034 0
【Vue3从零开始-第三章】3-5 父子组件之间事件通信
|
2月前
|
存储 JavaScript
组件间通信的方式有哪些优劣势
组件间通信方式多样,包括直接引用、事件触发、状态管理等。直接引用简单直观但耦合度高;事件触发灵活解耦但过度使用会增加调试难度;状态管理适用于复杂应用,维护全局状态,但学习成本较高。
|
4月前
|
存储 JavaScript 前端开发
如何在组件化中实现组件之间的通信
【8月更文挑战第13天】如何在组件化中实现组件之间的通信
63 3
|
6月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
7月前
|
存储 JavaScript 容器
还不懂Vuex是什么?和组件之间的关系是什么?
还不懂Vuex是什么?和组件之间的关系是什么?
|
7月前
|
算法 程序员 编译器
C++与C的对比:理解两者之间的异同与选择
C和C++是两种广泛使用的编程语言,都提供底层访问能力和指针操作,适合高效底层编程。C++是面向对象的,支持类和对象,提供异常处理、丰富的标准库和更强的类型系统;而C语言面向过程,无内置异常处理,标准库较简单,编译速度快。选择使用哪种语言应考虑项目需求、团队熟悉度和性能要求。C++常用于游戏开发、桌面应用和高性能场景;C则在系统级编程、嵌入式系统和性能敏感应用中占优。
|
7月前
|
存储 编译器 C语言
C与C++之间相互调用的基本方法
C与C++之间相互调用的基本方法
140 1
|
7月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
52 0
|
7月前
|
存储 缓存 前端开发
双向绑定与单向数据流之争,Solid会取代React吗
双向绑定与单向数据流之争,Solid会取代React吗
|
7月前
|
设计模式
二十三种设计模式全面解析-解密中介者模式:构建灵活的通信桥梁
二十三种设计模式全面解析-解密中介者模式:构建灵活的通信桥梁

热门文章

最新文章