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

Angular 2 [attr.class] overwrites native DOM classes

本文关键字：覆盖 原生 DOM class attr Angular      更新时间：2023-09-26

我有一个变量保存我的类名字符串：

classNameB = "class-B";

我想通过[attr.class]将这个类名添加到本机 DOM 元素中：

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

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

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

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

PS：我可以改用[ngClass]吗？

所以我经历了一些有趣的情况，我几乎没有选择。大多数时候，我使用[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>

仅此而已。这是我从那时起一直在使用的最后一个选项。希望如果有人遇到相同的座位会有所帮助。

[attr.class]='classNameB'

这里的类名B应该是附加$scope变量。 它可以是表达式或值。您也可以像这样修改代码 

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

对于 ng 类属性，它对两者的工作方式相同。或者你可以在布尔的基础上有一个类 

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

或

 ng-class="varA==0 ?'classNameB':'classNameA'"
相关文章：