如何更新Angular Observable的订户

dGa*_*and 3 observer-pattern angular angular-observable

在我的角度应用程序中,我创建了一个Observable来为多个组件提供数据更新。当用户单击按钮时,应使用不同的数据集更新所有可观察对象的订户。下面是代码。

import { Observable } from 'rxjs/Observable';
import { Subscriber } from 'rxjs/Subscriber';

export class MyService {
private data: number[] = [5,6,7,8];

/// The observable given to outside
private observable: Observable<number[]>;

/// Subscribers of the observable which is given to outside
private subscribers: Map<number, Subscriber<number[]>>;
private nextSubscriberId = 0;

constructor() {
    this.subscribers = new Map();
    this.observable = new Observable(subscriber => {
        const id = ++this.nextSubscriberId;
        this.subscribers.set(id, subscriber);

        subscriber.next(data);

        return () => { this.subscribers.delete(id); };
    });

}
Run Code Online (Sandbox Code Playgroud)

}

在按钮单击事件中,我执行以下操作

data = [1,2,3,4]; 
this.subscribers.forEach((subscriber, key) => {
    subscriber.next(data);
    });
Run Code Online (Sandbox Code Playgroud)

我的问题是,这是管理可观察对象的最佳方法吗?是否有其他替代方式来处理订户,而不是由我们自己管理订户?

Tom*_*ula 6

您基本上是想创建自己的Subject实现。尝试这个:

import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';

export class MyService {
  private source = new Subject<number[]>();
  data$ = this.source.asObservable();

  constructor() {}

  next(data: number[]) {
    this.source.next(data);
  }
}
Run Code Online (Sandbox Code Playgroud)

producer.component.ts

class ProducerComponent {
  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.next([1,2,3]);
  }
}
Run Code Online (Sandbox Code Playgroud)

消费者组件

class ConsumerComponent {
  constructor(private myService: MyService) {}

  ngOnInit() {
    this.myService.data$.subscribe(data => // ...)
  }
}
Run Code Online (Sandbox Code Playgroud)

如果您希望服务中具有初始值,请替换:

private source = new Subject<number[]>();

private source = new BehaviorSubject<number[]>([1,2,3,4]);,哪里[1,2,3,4]是初始值。