Два компонента слушают одну и ту же наблюдаемую

Question

У меня есть два (основной, подчиненный) компонента и сервис. Все в одном модуле

В моем сервисе у меня есть этот код:

private showThisSource = new BehaviorSubject<({ show: boolean })>({} as any);
currentThis = this.showThisSource.asObservable();

changeThis(data: { show: boolean }) {
      this.showThisSource.next(data);
}

В моем основном компоненте у меня есть этот код:

showThis(){
  this.theServiceAbove.changeThis({show:true})
}

В моем другом компоненте (подпункте) у меня есть этот код:

currentThis$ = this.theServiceAbove.currentThis
   .pipe(
         tap(data=>
              console.log('Display to log')
            ) 
        );

vm$ = combineLatest(
   this.currentThis$
  ).pipe(
         map(([currentThis]) =>
           ({ currentThis}))
        )

--template---

<div>
   <ng-container *ngIf="(vm$ | async) as vm">
   <ng-container>
</div>

Теперь проблема в том, что даже если я назвал changeThis на главном компоненте currentThis $ подкомпонента не происходит, как я знаю который? Потому что console.log('Display to log'); не появляется.

Я не знаю, чего мне здесь не хватает.

Answer 1

В вашем коде произошла синтаксическая ошибка. Я поместил его в Stackblitz, внес необходимые изменения и получил отображение console.log, а также поместил что-то в представление.

.pipe(
   tap(data=>
       console.log('Display to log') // Removed semi-colon from this line
   ) 
);

https://stackblitz.com/edit/angular-ynvtao