Angular ngClass-vs-[attr.class]-vs-class |属性插值是否会被弃用，以及如何提高性能

我想在模板初始化时设置一次类。一位同事写道

<div [attr.class]="localVariable === 'string' ? 'class-name' : null"><div>

因为这将在每个生命周期中运行，我不希望

localVariable

在应用程序执行期间动态更改

我宁愿：

class="{{localVariable === 'string' ? 'class-name' : null}}"

---

但我的同事说Angular不建议这样做，并且不推荐对属性插值的支持。如果在模板呈现后绑定值预计不会更改，是否有人可以确认这一点或说明哪些是最有效的

使用

ngClass

可以将类动态添加到该元素的当前类列表中。但是当您使用

attr.class

时，它会完全重新分配作用于该元素的类列表。您可以在元素中包含

ngClass

和

ngClass

，其中

ngClass

将包含类的动态列表。关于ngClass的更多信息。

在

[ngClass]

中，您不需要双括号。您可以简单地编写：

[ngClass]=“{'className'：localVariable===='string'}”

啊，是的，我的语法错误。

class="{{localVariable === 'string' ? 'class-name' : null}}"