在angular+2中有条件地更改特定类中的CSS样式

Question

让我们假设我有一个类

.some-class{
/// some style ex:
display: none
}

我想针对特定的类将样式更改为

.some-class{
display: block
}

基于我的应用程序中的一些用户操作所以它有点像

<div [class.some-class]="condition? display: block" >
</div>

在不需要使用JavaScriptDOM的情况下，这可能吗？

Answer 1

如果您打算有条件地应用样式，最好在样式中声明两个类，然后使用Angular提供的[ngClass]功能有条件地使用您的类。参考编号：https://angular.io/api/common/NgClass

.some-class__success{
display: block;
}
.some-class__normal{
display: none;
}

<div [ngClass]="condition ? 'some-class__success' : 'some-class__normal'">
</div>

因此，可以在基于相同条件的多个标记上使用[ngClass]。但是，为这些条件编写的类可以根据您对每个标记的要求进行更改。

我建议使用这种方法，因为通常不推荐使用这种方法。事实上，根据HTML或JS中的条件更改css类的内容有点麻烦。

---

如果您的意图是有条件地显示/隐藏div，那么使用super-easy*ngIf要容易得多。参考编号：https://angular.io/api/common/NgIf

*ngIf仅在条件为true时渲染元素。

.some-class{
display: block;
}

<div class="some-class" *ngIf="condtion">
I'm shown only if condition is true!
My class would be some-class!
</div>

这是隐藏/显示元素的推荐方法，因为如果条件为false，它就不会呈现标记。因此，不需要额外的样式，更重要的是，意外的函数或调用不能源自未渲染的元素，从而使代码无错误且易于调试。