在Angular中切换类的最佳方法

Question

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

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

这有效,但这真的是推荐的方式吗？记下category.active两次感觉有点不洁净.我正在寻找更多的东西 - 如果 - 其他类似的东西,但到目前为止在文档和SO上找不到任何东西.

Answer 1

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

以下是如何将该指令与字符串一起使用:

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

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

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