angular 的官網給出了父子組件之間數據交互的方法，如ViewChild、EventEmitter

但是如果要在同級組件之間進行數據同步，似乎并沒有給出太多的信息。

?

有時候我們想，在一個組件中修改數據之后，馬上反映到另外一個組件中， 或者可能需要調用另外一個組件中的方法，這時候，我們就可以借助于 rxjs 了。

下面源碼在 https://github.com/eleven26/angular-observer

?

1、首先，我們定義一個用于在應用內進行數據交互的 service

import {Injectable} from '@angular/core';@Injectable() export class StoreService {public storageObj = {};set(key, value) {this.storageObj[key] = value;}get(key) {return this.storageObj[key];}remove(key) {delete this.storageObj[key]} }

　　

2、我們在需要監聽數據變化的組件中加入以下代碼，此處是直接寫在了 AppComponent 中

import {Component, OnInit} from '@angular/core'; import {StoreService} from './store.service'; import {Observable} from 'rxjs/Observable';@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit{title = 'app works!';constructor(private storeService: StoreService) {}ngOnInit() {let myObserver: Observable<any> = Observable.create((observer) => {// payload 用以存放不同組件之間需要交互的數據let payload = this.storeService.get('payload');if (payload) {// do somethingif (payload['type'] == 'set-title') {this.title = payload['title'];}this.storeService.remove('payload');}observer.next();});// 保存到公共 service 中，以便不同組件之間可以使用同一個觀察者對象this.storeService.set('myObserver', myObserver);} }

　　

上面的代碼中，我們定義了一個可觀察對象 myObserver，我們在此方法上調用 subscribe 的時候，Observable.create 的回調就會被調用，

然后，我們從 StoreSrevice 中取得需要處理的數據，具體數據格式自由規定，

我們處理完數據之后，把相關數據從 StoreSrevice 中移除

?

同時，我們需要把 myObserver 保存到 StoreService 中，以便不同組件獲取到的是同一個 observer。

?

3、定義一個 A 組件，用來生產 payload，類似于 生產者-消費者

import {Component, OnInit} from '@angular/core'; import {StoreService} from './store.service'; import {Observable} from 'rxjs/Observable';@Component({selector: 'a-component',template: `<h1>A Component'title: {{title}}</h1><input type="text" (keyup)="change($event.target.value)">`,styles: [] }) export class AComponent implements OnInit{title = 'a title';public myObserver: Observable<any>;constructor(private storeService: StoreService) {}ngOnInit() {this.myObserver = this.storeService.get('myObserver');}change(new_title) {this.title = new_title;this.storeService.set('payload', {type: 'set-title',title: new_title});this.myObserver.subscribe(() => {});} }

　　

我們在該組件輸入 title 的時候，發現 AppComponent 的 title 也發生了相應的變化。

這樣一來，我們的效果就實現了。

?

?

轉載于:https://www.cnblogs.com/eleven24/p/8409152.html

總結

以上是生活随笔為你收集整理的angular 使用rxjs 监听同级兄弟组件数据变化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。