angular - 如何在浏览器中显示 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

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

在 html 模板中的任何标记上调用函数并在执行函数时登录控制台。每当执行更改检测时，模板将被重新评估，从而导致函数调用。这对我分析发生了什么非常有效

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

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