Angular 9 - 刷新视图 ngOnChanges。为什么我需要使用 ChangeDetectorRef？

Question

在我的场景中，我有一个父组件在按钮单击时接收新数据。子组件通过@Input 字段接收这些数据。在子组件事件ngOnChanges 被触发。 isLoaded 字段的值按预期更新。问题是：为什么我的 HTML 条件 <div *ngIf="isLoaded"> 需要 this.cd.detectChanges() 才能注意到 isLoaded 标志已更改？

父组件：

@Component()
export class ParentComponent implements OnInit {
  data: MyData;

  ngOnInit(): void {
  }

  updateWhenClickButton() {
    this.someService.getData(this.a, this.b, this.c).then(dataabc =>{
      this.data = new PurchasePriceBoxPlotData(this.a, this.b, dataabc);
    });
  }
}

父 HTML 内容：

<child-component [data]="data"></child-component>

子组件：

@Component()
export class ChildComponent implements OnInit, OnChanges {

  @Input()
  data: MyData;
  
  isLoaded: boolean = false;

  constructor(private cd: ChangeDetectorRef) { }

  ngOnInit(): void {
     this.doSth();
  }

  ngOnChanges(changes: SimpleChanges): void {
    this.isLoaded = false;
    this.cd.detectChanges();
    this.doSth();
  }
  
  private doSth() {
    ....
    this.isLoaded = true;
  }
}

子 HTML：

<div *ngIf="isLoaded">
    <custom-component [data]="data"></custom-component>
</div>

编辑

  public isLoaded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);

  ngOnChanges(changes: SimpleChanges): void {
      this.isLoaded$.next(false);
      this.dosth();
      this.isLoaded$.next(true);
  }

<div *ngIf="isLoaded$ | async">

Answer 1

Angular 的变更检测比最初看起来要复杂一些。这是一篇可能会有所帮助的好文章，

https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html

即使使用默认的 ChangeDetectionStrategy，您也可以做一些事情，但 Angular 的变更检测不会发现这些事情，我认为您遇到了其中之一。

我建议您使用 BehaviorSubject 而不是简单的布尔值，

public BehaviorSubject<boolean> isLoaded$ = new BehaviorSubject<boolean>(true);

然后在你的函数中，

ngOnChanges(): void {
  this.isLoaded$.next(false);
  ...
  this.isLoaded$.next(true);
}

最后在您的模板中，

<div *ngIf="isLoaded$ | async">
  <custom-component [data]="data"></custom-component>
</div>

您无需以这种方式运行cd.detectChanges()，因为BehaviorSubject 将值直接流式传输到模板。

另外，作为旁注，我永远不会调用this.ngOnInit()，该函数是一个钩子，旨在在组件生命周期的特定点运行，手动调用它可能会导致各种混乱.