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/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

相关文章
|
Go
go map进行有序的排序
go map进行有序的排序
193 0
|
8月前
|
存储 缓存
sessionStorage和localStorage的区别
sessionStorage和localStorage的区别
314 0
|
资源调度 前端开发 数据安全/隐私保护
react动态路由权限
【8月更文挑战第29天】 react动态路由权限
617 4
|
测试技术 程序员 C语言
『软件测试4』耗子尾汁!2021年了,你还不知道这4种白盒测试方法吗?
该文章深入介绍了四种常用的白盒测试方法,包括语句覆盖、判定覆盖、条件覆盖以及路径覆盖,并探讨了这些方法在软件测试中的应用。
『软件测试4』耗子尾汁!2021年了,你还不知道这4种白盒测试方法吗?
|
安全 Java 测试技术
谈谈springboot的单例模式
【4月更文挑战第13天】在 Spring Boot 和更广泛的 Spring 框架中,单例模式扮演着核心的角色,特别是在 Spring 的 Bean 生命周期和管理中。这里我们详细探讨一下 Spring Boot 中单例模式的运作原理、优势及其潜在问题。
668 7
|
前端开发 UED
【Web 前端】css盒子模型有几种类型?它们区别是什么?
【4月更文挑战第22天】【Web 前端】css盒子模型有几种类型?它们区别是什么?
|
JavaScript 前端开发 算法
javascript中判断数据类型
javascript中判断数据类型
|
JSON 安全 Java
如何基于 Swagger 使用 OpenAPI Generator生成 JMeter 脚本
【2月更文挑战第24天】如何基于 Swagger 使用 OpenAPI Generator生成 JMeter 脚本
732 0
如何基于 Swagger 使用 OpenAPI Generator生成 JMeter 脚本
|
JavaScript 前端开发 UED
js的节流
js的节流
304 0
|
JavaScript 调度
【源码&库】 Vue3 的依赖收集,这里的依赖指代的是什么?
【源码&库】 Vue3 的依赖收集,这里的依赖指代的是什么?
257 0
【源码&库】 Vue3 的依赖收集,这里的依赖指代的是什么?

热门文章

最新文章