如何在具有多个相同元素的实例的同时，从具有其他类的元素添加或删除类名

Question

我在从element添加或删除CSS类名时遇到问题。 它似乎没有添加类，它可以覆盖任何其他类。

<div class="my-div class-a"></div>

我希望在代码中将class-b添加到此div。

thisDivElement.className = 'class-b';

这将删除my-div class-a，而是粘贴class-b。

<div class="class-b"></div>

那么在angular2中如何在不覆盖其他类的情况下添加/删除类。请以正确的方式提出建议。

Answer 1

取自角度文档：

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-element>

您可以通过将代码中设置的变量替换为true / false值来修改哪些类处于活动状态。

e.g。 HTML：

<some-element [ngClass]="{'first': firstClassActive, 'second': secondClassActive, 'third': thirdClassActive}">...</some-element>

打字稿：

export class AppComponent {
  firstClassActive: boolean = true;
  secondClassActive: boolean = false;
  thirdClassActive: boolean = false;
}

此处有更详细的示例：https://angular.io/docs/ts/latest/api/common/index/NgClass-directive.html

我还应该指出，你可以使用jQuery来实现这一点，它可以让你更直接地访问DOM元素 - 但是我认为 最好不要使用Angular模板绑定。< / p>