调试Angular2更改检测器

发布时间：2020-12-17 07:15:22 所属栏目：安全来源：网络整理

导读：我正在寻找关于变换检测器如何在我们的应用程序中运行的细节.最近我发现我们正在渲染我们的应用程序远远超过我们需要并提交了 Angular issue.我已经能够修复我所知道的所有地方,但是现在我希望有一个简单的方法确切知道变化检测器何时运行,运行原因以及运行

我正在寻找关于变换检测器如何在我们的应用程序中运行的细节.最近我发现我们正在渲染我们的应用程序远远超过我们需要并提交了 Angular issue.我已经能够修复我所知道的所有地方,但是现在我希望有一个简单的方法确切知道变化检测器何时运行,运行原因以及运行时哪些组件是脏的.获取此信息的最佳和最简单方法是什么？

更新：因此,您可以在AppView.detectChanges中设置断点,以便在更改检测器运行时中断,然后单步执行该代码,您可以看到正在检查的内容.但是,我仍然不确定如何轻松确定触发变化检测器的内容或者标记要检查的组件的人员.

解决方法

另一种方法是创建自定义装饰器以添加ngDoCheck钩子并将其记录到页面中的组件,这样做的缺点是您必须将此装饰器添加到页面中的每个组件：

(window as any).calls = {};
export function debug() {
    return (constructor: any) => {
        if (!constructor.prototype.ngDoCheck) {
            constructor.prototype.ngDoCheck = () => {
                console.log("ngDoCheck",constructor.name);
                const calls = (window as any).calls;
                calls[constructor.name] = calls[constructor.name] ? calls[constructor.name] + 1 : 1;
            };
        }
    };
}
(window as any).resetCalls = () => (window as any).calls = {};

您可以在控制台中检查调用,以获取最多调用哪些组件的一些统计信息.
请记住,ngDoCheck调用并不意味着在该组件上运行更改检测,这表明更改检测正在父组件上运行.

尚不确定如何一致地确定实际触发变化检测的内容.一些想法覆盖了ngZone或ChangeDetector来记录实际的触发器.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!