Слушатели службы в угловой

Question

У меня есть служба, которая предоставляет данные в реальном времени для нескольких компонентов прослушивания. Существует только один экземпляр службы, и он хранит своих слушателей внутри, используя класс 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);
    }
  }
}

Теперь все работает отлично. Но мне не нравится тот факт, что мне нужно создать собственный класс для хранения и уведомления слушателей. Мои интуитивные ощущения говорят мне, что что-то уже существует для этого.

Итак, это заставило меня задуматься, каков был бы угловой способ сделать это?

Answer 1

Это кажется небольшим вопросом, но на самом деле он очень широкий. Вы должны использовать подписки, чтобы подписаться на BehaviourSubject в качестве наблюдаемого. Вот очень обнаженный пример этого:

@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 клиент