如何在浏览器中显示 Angular9 更改检测过程？

Question

我有一个复杂的组件，其中包含许多 @Input() 和异步进程。我想优化组件，因此打算在我的组件上分析 Angular4 更改检测周期。

我可以知道如何识别Angular4 更改检测系统是否正在被触发，以及 DOM 是否正在重新呈现？

可能，使用console.log(...)?

通常，我希望类似（在浏览器控制台中）：

Change-detection running... no changes... 1
Change-detection running... no changes... 2
Change-detection running... no changes... 3
Change-detection running... no changes... 4
Change-detection running... changed
No DOM rendering
Change-detection running... no changes... 5
Change-detection running... no changes... 6
Change-detection running... changed
DOM re-rendered
Change-detection running... no changes... 7
Change-detection running... no changes... 8

我如何实现这一目标？或者你们如何优化 Angular4 的性能？还有其他方法吗？

Answer 1

我想做同样的事情，但没有生命周期钩子可以做到这一点，所以我做了一个黑客，可能对你也有帮助。

在 html 模板中的任何标签上调用一个函数并在执行该函数时登录控制台。每当执行更改检测时，都会重新评估模板，从而导致函数调用。这对我分析正在发生的事情非常有效

.html
<div>{{doNothing()}}</div>

.ts
doNothing() {
  console.log('template evaluated');
}