Angular 9 display number of change detection cycles on the UI? stackblitz inside

问题

I'm trying to build a small dev component that displays only in non-production builds.

One of the things that I see useful to keep track of is the number of change detection cycles that I'm triggering as I'm adding various functionality to make sure I'm not doing something that's really unperformant. like having mouseover and mouseout events on the menu icon to change its color.

Sadly I can't seem to get it to actually display on the view and not just in the console.

Stackblitz here.

You'll be able to hover over a button that triggers change detection cycles and you can see in your browser console, not the stackblitz console, a counter for how many times that getter is recalculated.

The simplified code to catch the essence of it:

    public changes = 0;

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

and then in the html template:

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

Trying to manually trigger change detection with ChangeDetector ref will result in maximum call stack error.

Trying to switch change detection strategy to Default doesn't make it display either.

I know this is in many ways against desired functionality and requires some backwards work around the framework to get this going -- but I'd still like to give it a shot.

Thanks!

来源：https://stackoverflow.com/questions/62239283/angular-9-display-number-of-change-detection-cycles-on-the-ui-stackblitz-inside