调试Angular2变化检测器

angular

2016-11-28 53 views 3 likes

我期待深入了解变化检测器如何在我们的应用程序中运行的细节。最近我发现我们重新渲染我们的应用程序远远超过我们所需，并提交了一个Angular issue。我已经能够修复所有我知道渲染的地方比他们应该更多，但现在我想要一个简单的方法来确切知道变化检测器何时运行，它为什么运行以及哪些组件在运行时会变脏运行。什么是我获得这些信息的最好和最简单的方法？调试Angular2变化检测器

更新：因此，您可以在AppView.detectChanges中设置一个断点，以便在变化检测器运行时断开，然后逐步检查该代码，您可以看到正在检查的内容。但是，我仍然不确定如何轻松确定触发变化检测器的是什么，或者谁正在标记组件进行检查。

来源

2016-11-28 Tyler Davis

回答

另一种方法是创建定制的装饰增添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 = {};

您可以在您的控制台中查看calls以了解哪些组件被调用最多的统计信息。请记住，ngDoCheck调用并不意味着在该组件上运行更改检测，这表示更改检测正在父组件上运行。

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

来源

2017-09-29 08:10:42

调试Angular2变化检测器

回答

相关问题