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 something ???????if (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 也发生了相应的变化。
这样一来，我们的效果就实现了。
angular 使用rxjs 监听同级兄弟组件数据变化
原文地址：https://www.cnblogs.com/eleven24/p/8409152.html