angular - ngDoCheck (Angular9) 的真实用例

Question

我是 Angular 的初学者并自学，我一直坚持使用ngDoCheck 生命周期方法

根据文档：
检测 Angular 无法或不会自行检测到的更改并采取行动。

父组件：

user={
   name:"xxx"
}

update(){
  this.user.name="yyy"
}

父视图：

<button (click)="update">update</button>
<child-comp [inputprop]="user"></child-comp>

子组件

ngDoCheck(){
console.log(this.inputprop);
}

据我所知，使用这种生命周期方法可以获取更深层次的最新变化，而 ngOnChanges 无法检测到更深层次的输入属性变化。

简单来说，ngOnChanges 只会检测到属性的变化，只有属性的引用发生了变化。

在上面的示例中，ngDocheck 生命周期方法没有做任何事情来获取属性的最新更改。但相反，变更检测有助于获得更深层次的最新变更

我想知道使用 ngDoCheck 生命周期方法的确切用例。

score 0 · Accepted Answer

您的子组件变化检测器可能有以下策略

在默认策略中，CD 针对 @Input() 修饰属性的任何更改运行

在 onPush 策略中，CD 在您将新对象（引用）传递给 @Input 修饰属性时运行。

无论策略如何，CD 总是在以下场景中运行，

请记住，Angular CD 可以可视化为有向树，这意味着所有组件都可以视为树中的一个节点，Angular 总是从根节点到树的底部运行 CD。

即使在 CC-121 中触发了一个事件，Angular 也会从根组件运行 CD 到底部。但是，CD 的运行将在策略设置为 onPush 的节点处停止，并且您没有在 @Input 修饰属性之一中传递新对象。

所以现在您对 CD 运行的时间和方式有所了解，每次 CD 为组件运行时都会执行 ngDoCheck() 生命周期。

我希望它有所帮助。

谢谢

1 回答 1