时间戳

首页 > 解决方案 > 角度服务监听器

angular - 角度服务监听器

问题描述

我有一项为多个监听组件提供实时数据的服务。该服务只有一个实例，它使用一个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 的做法是什么？

标签： angularlistener

解决方案

这似乎是一个小问题，但实际上非常广泛。您需要使用 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 客户端

推荐阅读