尽管我调用了 ChangeDetectorRef.detectChanges，但未触发 ngOnChanges

Question

export class AppComponent implements OnInit, OnChanges {
  @Input()
  value: number;

  constructor(
    private cdr: ChangeDetectorRef
  ) {}

  ngOnInit() {
    of(1).subscribe(v => {
        this.value = v;

        console.log(1);

        this.cdr.detectChanges();

        of(2).subscribe(() => {
          console.log(2);
        });
      })
  }

  ngOnChanges(c: SimpleChanges) {
    console.log(3);
  }
}

我预计 console.log 的序列应该是 1, 3, 2 但它只打印 1, 2.

我知道 ngOnChanges 只有当只有 input 变化来自模板绑定时才会被触发。

所以我在 console.log(1) 之后立即调用了 this.cdr.detectChanges()，但它没有用。

这里有什么问题？

我在这里制作了 stackblitz 示例 - https://stackblitz.com/edit/angular-ivy-ugdba1

附加问题

如果无法触发组件内部的ngOnChanges，this.cdr.detectChanges()会触发什么生命周期钩子？

Answer 1

ngOnChanges 当输入参数从父组件更改时调用。

如果你想在任何检测之后做一些事情，你应该使用 ngAfterViewChecked()

Answer 2

this.cdr.detectChages() 在当前组件模板 上调用更改检测。这意味着如果当前组件包含 <child [data]="someData"></child> 那么它的 [data] 输入将被检查是否有变化。 child.ngDoCheck() 将被调用，如果 someData 是新值 child.ngOnChanges(...) 将被调用。

尽管我调用了 ChangeDetectorRef.detectChanges，但未触发 ngOnChanges

ngOnChanges not triggered though I called ChangeDetectorRef.detectChanges

ngonchanges

angular

change-detector-ref