Angular: использование асинхронного канала путем пользовательской установки значения переменной

Question

У меня есть родительский компонент A и много (более 20) дочерних компонентов, все расширяющие A и находящиеся внутри <ng-content></ng-content>.В компоненте A я устанавливаю значение переменной showContent в нескольких местах.

Проблема в том, что я использую *ngIf="showContent" во всех дочерних компонентах.Поскольку представления дочерних компонентов не обновляются при изменении значения в A, я могу либо:

A) использовать Output + EventEmitter, но я не хотел бы иметь

onValueChange(val: boolean) {
  this.showContent = val;
} 

в каждомдочерний компонент (20+ раз тот же код);

B) использовать асинхронный канал.Проблема в том, что я устанавливаю значение в подписках GET / POST

this.httpDataHandler.get<...>(...).subscribe(response => {
    // lots of stuff
    showContent = true;
});

Есть ли способ использовать асинхронный канал и удалить избыточный код из всех дочерних элементов?

Answer 1

Полагаю, вы могли бы использовать BehaviorSubject здесь:

showContent = new BehaviorSubject(false)
...
this.httpDataHandler.get<...>(...).subscribe(response => {
  // lots of stuff
  showContent.next(true);
});
...
*ngIf="showContent | async"

или используйте ChangeDetectorRef

constructor(private cdr: ChangeDetectorRef) {}
... 
this.httpDataHandler.get<...>(...).subscribe(response => {
  // lots of stuff
  showContent = true;
  this.cdr.markForCheck();
});
...
*ngIf="showContent"

В общем, когда у вас возникают подобные проблемы, вы пытаетесь извлечь данные из ваших наблюдаемых слишком рано. У вас может быть лучшее решение с некоторым рефакторингом, где вы бы избежали подписки. Но без полного кода трудно сказать, как ...