Angular 在ngStyle vs指令上调用函数之间的性能

这两种方法的主要区别是什么

<p [ngStyle]="getStyle()"> 
// getStyle returns a string like "color:blue" and some other attributes

//getStyle返回类似“color:blue”的字符串和其他一些属性

到

//指令获取myStatus作为输入并计算标记的样式

我正在维护的应用程序在

ngStyle

上多次调用这些函数

getStyle

（可能是5k次）。我目前正在将样式计算更改为指令，因为我认为它更干净

但我不知道这会对性能产生多大影响。我怎样才能测量它

还有一个问题，有没有一个文档/教程/书籍可以解释这样的事情

---

由于

必须尽可能避免在属性绑定中调用函数，这是因为在每个角度变化检测周期调用函数，即使在组件视图中更改了不相关的属性。由于这个原因，绑定到[ngStyle]的“getStyle（）”方法被调用了很多次[甚至比预期的还要多]。 您的第二种代码方法[指令]远远优于函数方法。在指令方法中，当您的有界输入属性发生更改时，只执行底层指令的输入属性更改相关代码。此外，您还可以通过使用ChangeDetectionStregy.OnPush[。 此外，在将数据从数据转换为演示文稿时，应使用角度管道。因为管道是记忆的[即，仅当输入发生变化时才对管道求值]

见以下条文—

---

为什么不使用CSS？你能说明如何计算样式字符串的实现逻辑吗？在我的示例中，我使用了字符串，它不是一个字符串。它是4个div的组合，依赖于许多属性。基于产品、状态、客户端等属性。因此，只有CSS可能是硬的，因为样式颜色存储在枚举中/数据库，而且它们的列表很长。@所以我认为调用“get”方法也有同样的问题，对吗？使用“get”函数的结果呈现某些数据的正确方法是什么。Thanks@RafaelAndrade最终get还是一个函数。get属性调用性能取决于它返回什么。如果它返回某个不可变的对象[not changed object]则angular不会重新渲染任何内容。如果get返回更改的内容，则它会重新渲染。如果我们有getter和模板的代码段，则可以提供“更好”的方法。底线是-如果有界属性更改，则angular会重新渲染[即引用或值]我将尝试在后面创建代码段并将其发送到这里。

<p appStyle [status]="myStatus">
//directive get myStatus as a input and calculate the style of the tag