Angular 9 在 UI 上显示变化检测周期数？里面的stackblitz

Question

我正在尝试构建一个仅在非生产构建中显示的小型开发组件。

我认为对跟踪有用的事情之一是我在添加各种功能时触发的变更检测周期的数量，以确保我没有做一些真正表现不佳的事情。比如在菜单图标上有 mouseover 和 mouseout 事件来改变它的颜色。

遗憾的是，我似乎无法让它实际显示在 View 上，而不仅仅是在控制台中。

Stackblitz here.

您可以将鼠标悬停在触发更改检测周期的按钮上，您可以在浏览器控制台(而不是 stackblitz 控制台)中看到重新计算 getter 次数的计数器。

捕获本质的简化代码:

    public changes = 0;

    public get changeDetection(): boolean {
        console.count("CHANGES");
        this.changes = +1;
        return true;
    }

然后在html模板中:

<div>{{ changes }}</div>
<div>
    {{ changeDetection }}
</div>

尝试使用 ChangeDetector ref 手动触发更改检测将导致最大调用堆栈错误。

尝试将更改检测策略切换为默认值也不会使其显示。

我知道这在很多方面都与所需的功能背道而驰，需要围绕框架进行一些倒退工作才能实现这一目标——但我仍然想试一试。

谢谢!

Answer 1

对于访问此问题而不是寻找自制解决方案的每个人:Angular DevTools Profiler可用于显示 CD 周期数，此外还显示每个 CD 周期的来源是什么以及已检查哪些组件。

在这里的例子中，我只有一个 CD 周期，并且没有检查具有 OnPush 策略的组件: