Angular 7 ngClass字符串和对象混合绑定

Question

我试图从组件属性和条件类中分配一个CSS类名称，其中color是“黑色”或“白色”或“蓝色”等，基于我将如何从Vue执行：[ngClass]="[color, { selected: color === selectedColor }]"不工作，我如何在Angular中做到这一点？

Answer 1

请查看我创建的示例：https://stackblitz.com/edit/angular-ufnzax?embed=1&file=src/app/app.component.ts

这对你所需要的东西来说太过分了，但你可以看到这个概念。您也可以根据需要检查和使用伪类。

主要观点 ：

CSS

.selected {
  border: 2px solid black;
}

.box {
  width:100px;
  height:100px;
  background-color: yellow;

}
.red {
  background-color: red;
}

.green {
  background-color: green;
}

.blue {
   background-color: blue;
}

标记

<div  [ngClass]="assignClass()">
</div> 

TS

assignClass(){
        if (this.selectedColor) {
          return [ 'box', this.selectedColor, 'selected' ]; 
        } else {
          return [ 'box' ]; 
        }
    }