Почему мой взгляд не обнаруживает изменения в подкомпоненте?

Question

Я использую Ionic 4 с Angular 8 framework. Я создал компонент с именем StatutIconeComponent в модуле с именем StatutConnexionModule. Я использую этот компонент в другом компоненте с именем TitrePageComponent. И, наконец, я использую этот последний компонент на странице с именем HomePage.

StatutIconeComponent прослушивает событие с именем «etat $», обновленное store.dispatch (поэтому Observable). Я использую асинхронный канал в шаблоне компонента.

Если поместить «StatutIconeComponent» непосредственно на странице «HomePage», представление обновляется при изменении «etat $».

Ноесли я помещу «StatutIconeComponent» в «TitrePageComponent», который находится на странице «HomePage», представление НЕ обновляется при изменении «etat $».

Я думаю, что это что-то с детектором угловых изменений, ноЯ совершенно новичок в этом фреймворке ...

шаблон HomePage

<app-titre-page>Contrôle d’accès</app-titre-page>
<ion-content>
  <ion-grid>
...

AppTitrePageComponent

@Component({
  selector: 'app-titre-page',
  templateUrl: './titre-page.component.html',
  styleUrls: ['./titre-page.component.scss'],
})
export class TitrePageComponent implements OnInit {

  constructor(private store: Store<State>) { }
...

шаблон страницы-приложения

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <app-statut-icone></app-statut-icone>
...

StatutIconeComponent

@Component({
  selector: 'app-statut-icone',
  templateUrl: './statut-icone.component.html',
  styleUrls: ['./statut-icone.component.scss'],
})
export class StatutIconeComponent implements OnInit {
  etat$: Observable<string>;

  constructor(private store: Store<State>) {}

  ngOnInit() {
    this.etat$ = this.store.pipe(
        select(selectStatut),
        map(statut => statut.connecte ? 'active' : 'inactive')
    );
...

шаблон app-statut-icone

<div [class]="etat$|async">
  <svg class="statut-icone" ...

стиль app-statut-icone

.active circle {
  fill: var(--statut-icone-actif, var(--ion-color-success));
}
.inactive circle {
  fill: var(--statut-icone-inactif, var(--ion-color-danger));
}

Я ожидаю изменений класса div ицвет меняется. Это работает, если «app-statut-icone» находится непосредственно в HomePage, но не если он находится в подкомпоненте ...

======= РЕДАКТИРОВАТЬ ======= ОК ... Так что проблема не в том, что я думал ... Я попробовал что-то еще ... Я удалил все компоненты, поэтому моя HomePage выглядит так:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button [routerLink]="['/home']" routerDirection="back">
        <ion-icon slot="icon-only" name="home" color="primary"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>{{(connecte$|async) ? 'OUI' : 'NON'}}</ion-title>

И текст не меняется, если я ненажмите на заголовок ...