angular - 即使没有做任何更改，Angular 也会无限重新渲染是否正常？

Question

问题

Angular 是否旨在不断重新检查所有内容以检测变化？我来自 React 世界，我期待像 event triggered -> re-rendering 这样的东西.我不知道这是来 self 的应用还是来自 Angular。

如果我有一个从 HTML 模板调用的方法，即使我的组件中没有任何更改，它也会被无限调用。

问题

我有一个类似日历的页面，它加载了大量数据并且必须在呈现之前进行计算，因为用 ngIf 做这些事情太难了。指示。所以我的模板中有一些东西看起来像:

<div [innerHTML]="_getDayPrice(item, day) | safeHtml"></div>  

如果我控制台在 _getDayPrice 中记录一些内容方法，它会无限打印。

我尝试过的

1. 我设法通过手动注入(inject) ChangeDetectionRef 来绕过这个问题在我的应用程序中做 this.cdRef.detach() .然而，这感觉很糟糕，因为有时我可能需要重新启用它并再次分离。

2. 我已经尝试调查它是否来 self 的父组件应用程序，例如容器。我在我的主要 app.component 中呈现了一个像 <div class={{computeClass()}}> 这样的 div。并在该方法中打印了一个控制台日志，果然它被无限调用了。因此，在此之后，我尝试注释掉所有应用程序的服务。如果所有内容都被注释掉，它确实可以正常工作，但也没有可观察到的数据。我已经调查了大约半天，但找不到单点故障(比如注释掉此服务可以解决所有问题)。

3. 使用 chrome 的内置性能选项卡记录性能，但同样无法从我的代码中找到任何触发更改的内容。 zone.js被反复调用，似乎设置了一个持续触发的间隔。

4. 当然，我已经搜索了出现的 setTimeout和 setInterval在服务中，但找不到可能导致此问题的不断变化的内容。

结论？

底线是:如果您有一个复杂的 Angular 应用程序并从模板调用一个方法，该方法将被无限调用，这是否正常？

如果不是，您是否有任何关于可能导致此问题的提示？或者任何其他绕过它而不是分离 changeRef 检测器的方法？

我唯一关心的是性能。这是一个类似日历的页面，呈现多行，并且在 8GB RAM 笔记本电脑上严重滞后。我很确定平板电脑或手机几乎会死机。

Answer 1

在 HTML 中转换数据时，您应该尽可能多地使用管道。

管道仅在管道对象或参数更改时重新评估(因此，如果输入之一是对象，请确保创建该对象的新实例以触发重新评估)。对于大多数用途，您可以使用管道而不是函数。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'getDayPrice'
})
export class GetDayPricePipe implements PipeTransform {

  transform(item: string, day: string): string {
    // ... do whatever logic here
    return item + day;
  }

}

然后像这样使用它:

<div [innerHTML]="item | getDayPrice:day | safeHtml"></div>