组件看不到订阅更改

Question

component.ts

export class MyComponent implements OnInit {
  constructor(
    private router: Router,
    private store: Store<fromApp.State>
  ) {}
  loading: boolean;

  ngOnInit(): void {
    this.store.select('myState').subscribe(({ loading }) => {
      this.loading = loading;
      console.log(this.loading);
    });
  }
}

component.html

<div *ngIf="loading">
  loading
</div>

<div *ngIf="!loading">not loading</div>

在浏览器控制台中，我可以看到 loading=false 和 loading=true 两种状态之间的切换。但是，在浏览器中我总是看到“正在加载”。我在这里错过了什么？

Answer 1

这意味着当您的 observable 被触发时，变化检测周期不会被触发。它通常出现在使用 OnPush 策略时（-> 提高性能，因为检测周期更少运行，但你必须更明确地了解对应物的变化）。

所以有 3 种方法可以解决您的问题：

在你的组件树中禁用 OnPush 策略（不推荐，你肯定会从其他地方受益）
您明确运行更改检测周期：

constructor(..., private cdr: ChangeDetectorRef) {...}

// then in your subscription code:
this.loading = false;
this.cdr.markForCheck();

您在组件模板代码中使用异步管道，因为它与 ngZone 配合得很好：*ngIf="loading$ | async"，这意味着您的加载 observable 保持原样：loading$ = this.store.select('myState').pipe(map(s => s.loading)).

组件看不到订阅更改

Component doesn't see subscription changes

ngrx

angular