为什么当通过路由更改更新商店时 ngClass 不更新？

Question

这是一个 stackblitz： https://stackblitz.com/edit/angular-esn4jk?file=src/app/app.module.ts

对于我使用红色和绿色的示例，我基本上希望能够在模式之间切换，我有两个按钮：

<button [ngClass]="{ active: !(isGreen$ | async) }" (click)="redColor()">
  {{ 'red' | translate }}
</button>

<button [ngClass]="{ active: (isGreen$ | async) }" (click)="greenColor()">
  {{ 'green' | translate }}
</button>

<br />

{{ color$ | async | translate }}

<br />

<router-outlet></router-outlet>

打字稿是这样的：

  isGreen$ = this.store.select(getColor).pipe(map((c) => c === 'green'));
  color$ = this.store.select(getColor);

  constructor(private store: Store<RootState>, private router: Router) {}

  ngOnInit(): void {}

  redColor(): void {
    this.router.navigate(['']);
  }

  greenColor(): void {
    this.router.navigate(['green']);
  }

然后我有一个绿色组件和一个红色组件。默认路由变为红色，绿色路由变为绿色。每个组件在它的 ngoninit 中触发一个事件来激活它的颜色。

花括号之间的颜色显示正确，但 ngclass 不想按我想要的方式工作。当通过浏览器中的地址栏直接导航到绿色时，错误的按钮处于活动状态，更新语言修复它。

Answer 1

因为控制台显示表达式已更改错误。你可以在这里读更多关于它的内容：- https://angular.io/errors/NG0100

您可以使用 isGreen 地图中的 detectChanges 方法手动触发变化检测，如下所示：-

isGreen$ = this.store.select(getColor).pipe(
    map((c) => {
      const val = c === 'green';
      setTimeout(() => this.cd.detectChanges());
      return val;
    })
  );

Cd 是变化检测器参考的参考。或像下面这样为您的订阅添加延迟：-

isGreen$ = this.store.select(getColor).pipe(
    delay(1),
    map((c) => c === 'green')
  );

我更喜欢延迟的。

为什么当通过路由更改更新商店时 ngClass 不更新？

Why is ngClass not updating when store is updated by route change?

angular

ngrx-store