以 angular+2 有条件地更改特定 class 的 CSS 样式

Question

假设我有一个 class

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

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

.some-class{
   display: block
}

基于我的应用程序中的一些用户操作，所以它是这样的

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

</div>

这可能不需要使用 JavaScript DOM 吗？

Answer 1

If your intention is to apply styles conditionally it would be better to declare 2 classes in styles and then use the [ngClass] feature that Angular offers to apply your class conditionally. 参考： 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，那么使用超级简单的 *ngIf 会更容易。 参考： https://angular.io/api/common/NgIf

*ngIf 仅在条件为真时呈现元素。

 .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 ，它根本不会呈现标签。 因此不需要额外的 styles，更重要的是，意外的函数或调用不能源自未渲染的元素，使您的代码无错误且易于调试。