Лучший и самый чистый способ вернуть значение, которое зависит от наблюдаемого

Question

У меня много кода, который структурирован так, как показано ниже. Есть много Observables или ReplaySubjects. Если я хочу извлечь из шаблона HTML значение, содержащееся в наблюдаемой, каков наилучший способ сделать это? В особых случаях также включены параметры из шаблона.

public config$ = new ReplaySubject<Config>(1);

public getValue(foo: number): number {
  this.config$.pipe(take(1)).subscribe((config) => {
     // something like return config.value + foo;
  });
}

Answer 1

Рекомендуется по возможности не использовать subscribe, потому что тогда вам также придется управлять отпиской от наблюдаемого. Лучше всего направить наблюдаемое, а затем использовать async канал в вашем шаблоне. Вы также можете использовать *ngIf="config$ | async as config", чтобы установить для переменной config в вашем шаблоне самое последнее значение из наблюдаемой.

В вашем контроллере

public value$ = this.config$.pipe(take(1), map(config => config.x));

А затем в вашем шаблоне

Value x from the config: {{ value$ | async }}

См. stackblitz для рабочего примера.