Question

我将Ionic 4与Angular 8框架一起使用。我在名为StatutConnexionModule的模块中创建了一个名为StatutIconeComponent的组件。我在另一个名为TitrePageComponent的组件中使用了此组件。最后，我在名为HomePage的页面中使用了最后一个组件。

“ StatutIconeComponent”侦听一个由store.dispatch更新的名为“ etat $”的事件（因此是一个Observable）。我在组件模板中使用了异步管道。

如果我将“ StatutIconeComponent”直接放在页面“ HomePage”中，则在更改“ etat $”时更新视图。

但是，如果我将“ StatutIconeComponent”放入“主页”页面的“ TitrePageComponent”中，则在更改“ etat $”后视图不会更新。

我认为Angular变化检测器有点问题，但是我对这个框架很陌生...

主页模板

<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" ...

应用程序状态图标样式

.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”直接位于首页中，但如果位于子组件中则不起作用...

=======编辑======= 好...所以问题不是我所想的... 我尝试了其他东西... 我删除了所有组件，所以我的主页是这样的：

<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>

如果我不单击标题，文本也不会改变...

为什么我的视图无法检测到子组件中的更改？

0 个答案: