RXJS元件間超越父子關係的相互通訊
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/
本文版權歸作者和部落格園共有,歡迎轉載,但未經作者同意必須保留此段宣告,且在文章頁面明顯位置給出原文連線,否則保留追究法律責任的權利。
相關文章
- vue父子關係元件間的雙向資料繫結Vue元件
- Elasticsearch 父子關係Elasticsearch
- Vue2.0父子元件間通訊Vue元件
- ElasticSearch系列--父子關係Elasticsearch
- 3.Vue非父子元件之間的通訊Vue元件
- 非父子元件間的傳值元件
- Vue 父子元件的通訊Vue元件
- dotnet 設定 X11 建立視窗之間的父子關係
- vue 父子元件通訊Vue元件
- 父子元件之間的傳值問題元件
- Vue中父子元件通訊——元件todolistVue元件
- 父子元件資訊傳遞元件
- Linux檢視相關係統資訊Linux
- 統計學三大相關係數之Pearson相關係數、Spearman相關係數
- ES 筆記四十三:文件的父子關係筆記
- vue--select父子元件通訊Vue元件
- vue之父子元件間通訊例項講解(props、$ref、$emit)Vue元件MIT
- vue---註冊元件、元件之間父子傳值Vue元件
- vue---元件間傳遞訊息(父子傳遞訊息,兄弟傳遞訊息)Vue元件
- vue父子元件通訊高階用法Vue元件
- 我學react之父子元件通訊React元件
- Vue父子元件通訊小總結Vue元件
- Vue 與 React 父子元件之間的家長裡短VueReact元件
- vue父子元件之間傳值以及方法呼叫Vue元件
- 元件:非父子間傳值(同級傳值)元件
- Vue.js 父子元件通訊的1212種方式Vue.js元件
- vue的元件巢狀關係Vue元件巢狀
- 會vue,學習react元件父子通訊VueReact元件
- prop父子元件通訊,動靜態prop元件
- 簡單說說vue的父子元件,父子元件傳值和vuexVue元件
- 資料關係比較:相關性 vs 因果關係
- 微信小程式父子元件之間的資料傳遞微信小程式元件
- 【java】類之間的關係Java
- vue 父子元件的方法呼叫Vue元件
- vue2.0父子、兄弟元件通訊,$emit使用Vue元件MIT
- uniapp webview如何與H5相互通訊APPWebViewH5
- 資料的相關性或因果關係 - KDnuggets
- 通過遞迴實現,單表父子關係資料 或者上下級關係資料的組合遞迴