在 Angular IVY 应用程序中触发更改检测答案

【问题标题】：Trigger change detection in Angular IVY application在 Angular IVY 应用程序中触发更改检测
【发布时间】：2020-03-30 03:56:18
【问题描述】：

在 IVY 之前，我们可以根据this awesome SO answer：

ng.probe(getAllAngularRootElements()[0]).injector.get(ng.coreTokens.ApplicationRef).tick()

现在的问题是，我们如何在 Ivy 中实现这一点？

在开发模式下运行时，在控制台中输入 ng 会显示：

但我不确定如何使用它来检测根元素的变化？

解决方法

通过在给定组件中注入ChangeDetectorRef，我可以执行以下操作（其中 $0 是开发工具中先前选择的元素）：

ng.getComponent($0).changeDetectorRef.detectChanges()

但这不适用于根组件？

【问题讨论】：

【解决方案1】：

你可以打电话

ng.markDirty($0)

其中 $0 是 devtools 面板中的选定元素。

在 v9 中是 applyChanges 方法。

【讨论】：

好的，所以当以编程方式执行此操作时，您必须先查询根元素，然后再查询 markDirty? markDirty 会触发 changeDetection，还是只在下次运行时标记组件进行更改检测？
它需要一个组件并触发更改检测。
我现在刚升级到Angular v9，找不到方法markDirty？
ng.applyChanges()
目前这个 stackoverflow 答案在 ng.applyChanges 中排名很高，并且在 Angular 文档中根本没有很好地解释。因此，对于像我这样刚刚发现 ng.applyChanges() 的人来说，它本身会引发断言错误——你必须提供一个组件。 ng.applyChanges(ng.getComponent(temp1)) 其中temp1 是一个DOM 元素。您可以在 Chrome 中右键单击 app-mycomponent 节点并选择 Store as global variable 以将 temp1 分配给页面上已有的组件。