0

我的意思是：

// my.component.ts
// ...
public isVisible() {
  myObject.nested.prop > 27 && otherObj.foo === 'lala'
}

然后在模板中：

// my.component.html
<div *ngIf="isVisible()">
  <p>Hi!</p>
</div>

该函数不会做任何疯狂的事情，因此运行起来很便宜，但我希望它是一个函数而不是一个变量，以便在它检查的值发生变化时更新布尔值。如果我不使用函数而是使用变量（作为布尔值或作为BehaviorSubject<boolean>），我将得到臭名昭著的ExpressionChangedAfterItHasBeenCheckedError.

我尝试在浏览器中运行分析器，并在运行时将函数记录到控制台，虽然它连续运行多次，但似乎没有太大影响。

这是不好的做法吗？与使用变量相比，它对性能有影响吗？

4

2 回答 2

1

是的，在模板中调用函数是一种不好的做法，因为调用该函数的次数取决于更改检测周期的数量。变更检测周期数取决于您实现的功能。

我们一般应该避免调用模板的函数。相反，您可以做的是创建一个管道并将输入传递给管道以返回所需的值。管道默认情况下是纯的，因此只有在输入更改时才会调用它们。

要了解更多详细信息，您可以参考：- https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496

于 2020-12-10T07:00:39.413 回答
1

ngIf每次更改检测器运行时，都会运行传递给的函数。

如果该函数非常简单和简短，则不应该存在性能问题，但如果它不仅仅是一个简单的 getter，我建议您改为绑定到一个变量并在必要时更新该变量（可能通过订阅到一个Observable）。

于 2020-12-10T07:01:50.123 回答