NgClass与Class的区别

Question

我想知道何时应该使用ngClass而不是class。我注意到这个样式在CSS文件中。

.someClass {
  color: red;
}

<div [ngClass]="['someClass']">Some text</div>
<div class="someClass">Some text2</div>

使用两种不同方法使两个div正常工作。我认为当我们使用条件语句时，使用[ngClass]是一种好的实践。那么，使用[ngClass]而不是class有哪些好处呢？

- Walter White

---

这个被错误地标记为重复。链接的问题是关于[class.someClass]的，而这个问题不是。 - derpedy-doo

Answer 1

使用 ngClass，我们可以使用表达式来控制类名，例如，如果您想根据条件使用类，则需要使用ng-class。

代码示例： <button ng-class="row.bstatus?'btn red btn-outline':'btn green-haze btn-outline'">{{row.bstatus?'停用':'启用' }}</button>

- RANVIR GORAI

---

嗨Ranvir，我也可以使用Angular表达式来完成，那么这里的好处是什么呢？例如： <button class={{"row.bstatus?'btn red btn-outline':'btn green-haze btn-outline'"}}>{{row.bstatus?'Deactivate':'Activate' }}</button> - Akshay Pingle

@AkshayPingle 我也在想这个问题。你是只观察到你的语法导致了等效的行为，还是能够解释为什么 [class] 和 [ngClass] 不仅仅是彼此的副本。对我来说，它看起来像是已经存在的功能的重复，但我确信后者有其意义，尽管我还没有意识到它是什么。 - Konrad Viltersten

Answer 2

仅用于添加单个文字类名并没有太多好处。使用它的好处在于可以动态设置类。

在此处阅读更多。

- ChiefTwoPencils

---

由于ngClass将包含一个与其组件绑定的值，因此当浏览器加载该组件时，ngClass语法将从组件中获取该值并相应地执行操作。而在仅使用class语法的情况下，将不会进行数据绑定，因此如果组件出现故障，则类将无法在DOM中清晰地呈现。您对这个观点有什么看法？ - Sahil Babbar

@SahilBabbar 如果我们使用 [class] 而不仅仅是 class，会不会导致数据绑定发生？(我一直在使用 ngClass 并且将其用括号括起来进行数据绑定，因为这是官方文档中推荐的方法，但最近，我意识到我无法解释 [class] 不会产生相同的效果。这让我想到 ngClass 看起来是一个没有新作用的功能。而且我确定 Angular 团队不会在无用的东西上浪费时间...) - Konrad Viltersten