角度服务监听器答案

【问题标题】：service listeners in angular角度服务监听器
【发布时间】：2019-06-08 12:49:57
【问题描述】：

我有一个向多个监听组件提供实时数据的服务。该服务只有一个实例，它使用ListenerCollection 类在内部存储其侦听器。

@Injectable()
export class SomeService {
  public listeners: ListenerCollection = new ListenerCollection();
}

ListenerCollection 在内部拥有一组侦听器。它有多种用途，其中之一就是这个特定的服务。

export class ListenerCollection {
  private listeners: Set<any> = new Set<any>();

  constructor() {}

  public addListener(listener) {
    this.listeners.add(listener);
  }

  public removeListener(listener) {
    this.listeners.delete(listener);
  }

  public notifyListeners(param: any) {
    const listeners: Iterable<any> = this.listeners.values();
    for (const listener of listeners) {
      listener(param);
    }
  }
}

现在，它运行良好。但我不喜欢我必须创建一个自定义类来存储和通知听众的事实。我的直觉告诉我，为此已经存在一些东西。

所以，这让我想知道，Angular 的做法是什么？

【问题讨论】：

How to subscribe to an event on a service in Angular2?的可能重复
您可以将 Subject 或 SubjectBehavior 用作 RxJs 中的 Observable，然后从您的 listeners 订阅它们。它们是高级别的观察者模式表示。
@CoveredEe 您能否详细说明一下这些对象之间的区别。 - 我没有问题让它工作。我的问题更多是关于 - 什么是最先进的方法，以及我可以期待什么陷阱。 - 我应该读一本关于 RxJs 的书吗？
@bvdb 在阅读整本书之前，请先阅读Angular RxJs guide

标签： angular listener

【解决方案1】：

这似乎是一个小问题，但实际上非常广泛。您需要使用 Subscriptions 将 BehaviourSubject 作为 Observable 进行订阅。这是一个非常简单的例子：

@Injectable()
export class SomeService implements OnDestroy {
    private isReady = new BehaviorSubject<boolean>(false); // type: boolean - Default value: false

    public get isReady$() {
        return this.isReady.asObservable(); // returns BehaviourSubject as an Obervable
    }

    ngOnDestroy() {
        this.isReady.complete(); // Good practice to complete subject on lifecycle hook ngOnDestroy
    }
}

在您的组件中订阅更改

export class SomeComponent implements OnInit, OnDestroy {

  constructor(private someStateService: SomeService) {} // Inject service in constructor

  public ngOnInit(): void {
    this.isReadySubscription = this.navigationStateService.getMenuBackgroundColor$().subscribe(data => {
            // change callback
            console.log(data);
        });

  public ngOnDestroy(): void {
   // Remember to unsubscribe your services on destroy - otherwise you might have memory leaks
   if (this.someStateService) {
      this.someStateService.unsubscribe();
   }
  }
}

虽然这不是唯一的方法，但这是 1.01 的服务课程。查看文档以获取有关 Observables 的更多信息。如果您正在调用 API，请查看 http client

【讨论】：