Angular 2 [attr.class]覆盖原生DOM类

Question

我有一个包含我的类名字符串的变量：

classNameB = "class-B";

我想通过[attr.class]将此类名添加到原生DOM元素：

<div class="class-A" [attr.class]='classNameB'></div>

然后，angular会覆盖当前的DOM类class-A。元素创建后留下的内容如下：

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

我在这里做错了什么以及如何解决这个问题？

PS：我可以使用[ngClass]代替吗？

Answer 1

所以我经历了一些有趣的情况，我几乎没有选择。大多数时候，我使用[ngClass]，直到：

<div class='native-class' [ngClass]='classNameHolder' [ngClass]='{"some-class": isSomeClass}'>

其中，

classNameHolder: string = 'class-name-1';
isSomeClass: boolean = true;

我被困住了，直到我发现ngClass：

<div class='native-class' ngClass='{{classNameHolder}} {{isSomeClass ? "some-class" : ""}}></div>

就是这样。这是我从那时起一直在使用的最终选项。如果有人遇到同样的情况，希望它会有所帮助。

Answer 2

[attr.class]='classNameB'

这里classNameB应该是$ scope附加变量。这可以是表达或价值。 你也可以像这样修改代码

[attr.class]='{{getClassName()}}'

对于ng-class属性，它对两者都一样。 或者你可以在布尔基础上有一个类

[attr.class]="'ifThis'?'classNameB':'classNameA'"

或

 ng-class="varA==0 ?'classNameB':'classNameA'"