ngClass - vs - [attr.class] - vs - class |将不推荐使用插值属性以及如何使此性能

Question

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

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

但这看起来很奇怪。我想我不想要

[ngClass]="{'class-name': localVariable === 'string'}"

因为这将运行每个生命周期，并且我不希望localVariable在应用程序执行期间动态更改。

我更喜欢：

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

但是我的同事说Angular并不建议这样做，并且对属性插值的支持将被弃用。任何人都可以确认这一点或提出一个案例，鉴于在模板渲染后预计绑定值不会改变，这些性能最高吗？

Answer 1

使用ngClass可以动态地将类添加到该元素的当前类列表中。但是当你使用attr.class时，它会完全重新分配作用于该元素的类列表。您可以在class包含动态类列表的元素中包含ngClass和ngClass。有关ngClass here的更多信息。