Question

我有一个包含许多@Input（）和异步进程的复杂组件。我想优化组件，因此打算在我的组件上分析Angular4变化检测周期。

如果Angular4变更检测系统已触发，并且DOM正在重新呈现，我是否知道如何识别？< / p>

可能使用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？

通常，我希望像（在浏览器控制台中）这样的东西：

declare @startDate date = '20130101' --or perhaps select min(transaction_datetime) from your table
declare @endDate date = '20130301'   --or perhaps select max(transaction_datetime) from your table

;with dates as(
    select TheDate = @startDate
    union all
    select TheDate = dateadd(day,30,TheDate)
    from dates
    where TheDate <= @endDate
)

select
    StartWindow = TheDate 
    ,EndWindow = dateadd(day,29,TheDate)
from dates
option (maxrecursion 0)

我如何实现这一目标？或者您如何优化Angular4的性能？还有其他方法吗？

Answer 1

我想做同样的事情，但没有生命周期钩子可以做到这一点，所以我做了一个黑客，也可能会帮助你。

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

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

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

Answer 2

如果模板中包含ngFor，则可以添加trackBy。每当更改检测触发器（https://angular.io/api/common/NgForOf#change-propagation）被调用时，您就可以注销一条语句。然后，您可以在函数上设置断点，并查看堆栈跟踪以查看更改事件的起源。

在尝试调试可能会由于更改检测不断触发而导致浏览器崩溃的问题时，我偶然发现了该方法。

模板

<div *ngFor="let things of things; trackBy: trackThings"></div>

组件

trackThings(index, thing) {
 console.log(index, question)
 return thing ? index : undefined;
}

Track by还可以提高性能：https://medium.com/@ramy_ali/improving-angular-ngfor-performance-through-trackby-ae4cf943b878

如何在浏览器中显示Angular4变化检测过程？

2 个答案: