Angular2 [ngClass] - 将直接绑定与条件类相结合

Question

我目前在一个元素上有两个不同的 [ngClass] 工作实现；

[ngClass]="{ selected: element.isSelected, highlighted: element.isHighlighted}"

和

[ngClass]="element.customClasses"

是否可以在模板中结合使用这两种方法，或者我是否必须在我的组件中创建一个方法来根据上述逻辑 return 类的数组？

谢谢！

Answer 1

您可以直接将 customClasses 设置为您的模板

<span class="customClasses">something</span>

你也可以使用 [ngClass] ，它将根据条件附加你的类，所以放在一起

<span [ngClass]="{ selected: element.isSelected, 
                 highlighted: element.isHighlighted}" 
                 class="customClasses">something
</span>

Answer 2

我选择使用 [class.*] 来设置条件类，留下 [ngClass] 来处理绑定；

<div 
  [ngClass]="element.customClasses" 
  [class.selected]="element.isSelected"
  [class.highlighted]="element.isHighlighted"
></div>

Angular2 [ngClass] - 将直接绑定与条件类相结合

Angular2 [ngClass] - Combining direct binding with conditional classes

javascript

ng-class

angular

Angular2 [ngClass] - 将直接绑定与条件 类 相结合

Angular2 [ngClass] - Combining direct binding with conditional classes

javascript

ng-class

angular

Angular2 [ngClass] - 将直接绑定与条件类相结合