angular 使用rxjs 监听同级兄弟组件数据变化

Posted 2020-10-23 白桂任的博客

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 也发生了相应的变化。

这样一来，我们的效果就实现了。