在Angular中切换类的最佳方法

Question

在我的Angular4应用程序中，我有一个代码来有条件地应用两个看起来像这样的类：

<some-element [ngClass]="{ 'fa-toggle-on': category.active, 'fa-toggle-off': !category.active }">
</some-element>

这有效，但这是否真的是推荐方式？写下category.active两次感觉有点不干净。我正在寻找更多的其他东西，但是在文档和SO上找不到任何东西。

Answer 1

ngClass指令采用表达式。表达式可以计算为字符串。

以下是how to use the directive with the string：

的方法

<some-element [ngClass]="'first second'">...</some-element>

因此，在您的情况下，使用计算结果为字符串的表达式：

<some-element [ngClass]="category.active ? 'fa-toggle-on' : 'fa-toggle-off'">