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 父子组件之间事件通信
2026 0
【Vue3从零开始-第三章】3-5 父子组件之间事件通信
|
2月前
|
存储 JavaScript
组件间通信的方式有哪些优劣势
组件间通信方式多样,包括直接引用、事件触发、状态管理等。直接引用简单直观但耦合度高;事件触发灵活解耦但过度使用会增加调试难度;状态管理适用于复杂应用,维护全局状态,但学习成本较高。
|
4月前
|
存储 JavaScript 前端开发
如何在组件化中实现组件之间的通信
【8月更文挑战第13天】如何在组件化中实现组件之间的通信
55 3
|
6月前
|
存储 前端开发 JavaScript
在React中有效地管理组件之间的通信和数据流
在React中有效地管理组件之间的通信和数据流
|
7月前
|
JavaScript 前端开发 API
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
【前端--Vue】组件之间的多种通信方式,一文彻底搞懂组件通信!
|
7月前
|
JavaScript
vue父子组件之间通讯方式
vue父子组件之间通讯方式
33 2
|
7月前
|
JSON 小程序 JavaScript
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
【微信小程序】-- 自定义组件 - 父子组件之间的通信(三十八)
|
7月前
|
JavaScript
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
48 0
|
7月前
|
存储 缓存 前端开发
双向绑定与单向数据流之争,Solid会取代React吗
双向绑定与单向数据流之争,Solid会取代React吗