方法与管道

Question

在Angular应用程序中使用管道和模板插值中的方法之间有区别吗？

例如:

<h1>{{ name.toLowerCase() }}</h1> VS <h1>{{ name | lowercase }}</h1>

在表现方面,是真的有收获还是只是个人偏好？

我知道在模板中调用方法通常会降低性能,因为Angular会不断检查其执行是否发生了任何变化.大多数时候,我会在我的组件上使用计算属性.

Answer 1

请阅读有关管道的文档，注意此类所谓的“纯”和“不纯”管道。这应该解决有关管道性能的问题。

调用这样的函数

{{ name.toLowerCase() }}

取决于函数本身。在这种特定情况下，我认为它与管道相同，但管道是专门为此目的创建的。

Answer 2

TL; DR;不要在模板中使用函数或方法，而应使用管道。

仅当输入值更改时才调用管道。每次更改检测都会调用一个函数或方法。如果您想了解有关模板中函数的更多信息，这是一篇不错的文章。

这是方法vs管道的运行stackblitz演示。