为什么 ngOnChanges 需要时间。它是异步的吗？

Question

我正在使用 angular 9+，我对 ngOnChanges 生命周期的行为有点困惑。

我正在尝试做什么

我有一个异步操作，它使用 @Input() 装饰器为子组件设置一个值（对象类型）。代码如下。（堆栈闪电战 Here）

parent.ts

import { AfterViewInit, Component, VERSION, ViewChild } from '@angular/core';
import { ChildComponent } from './child/child.component';
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild(ChildComponent) childComponent: ChildComponent;
  data = { value: null };

  constructor() {}

  ngAfterViewInit() {
    const foo = of([1])
      .pipe(delay(500))
      .subscribe(subscriber => {
        this.data = { value: 123 };
        this.childComponent.printState();
      });
  }
}

Parent.Html

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

子组件

    import { Component, Input, OnChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnChanges {
  @Input() data = null;

  constructor() {}

  ngOnChanges(changes) {
    console.log('ngOnChanges');
  }

  printState() {
    console.log('printState');
    console.log(this.data.value);
  }
}

我想做的是，一旦我更改了值，我就尝试使用如上所示的视图子引用来打印设置值的值。

理想的顺序应该是

ngOnChanges // initial value
ngOnChanges // after value set
printState // after calling printState()

但我明白了

ngOnChanges 
printState 
ngOnChanges

在控制台中，这非常令人困惑。为什么 ngOnChanges 也没有立即被解雇。为什么要花时间。谁能解释一下。

谢谢，注意安全:)

Answer 1

当您更新任何绑定到 @Input() 的变量时，就像您在 AppComponent 的 ngAfterViewInit 中所做的那样，更改检测将由 Angular 安排到 [=24] =] 只是 before view rendering 而不是在分配后立即。

因此，ngAfterViewInit中的代码将首先执行，ngOnChanges中的代码将在下一个tick被Angular调用。

是的，总而言之，变化检测是异步的。

为什么 ngOnChanges 需要时间。它是异步的吗？

Why does ngOnChanges take time. Is it asynchronous?

angular

angular9

angular10