如何将值传递到 DIV 标签中的类中

Question

>我正在编辑进度条的现有代码。最初，进度条只能接受进度值 [最小值、最大值、进度]。例如 [min=0， max=100， 进度 = 30]。

我想添加可以更改颜色的新输入。例如，如果 color="yellow"，则进度条颜色为黄色。我该怎么做？

我想使 CLASS 值(进度条.html(是可更改的。

我已经尝试了几种方法，但由于对语法缺乏了解，我没有成功。

主.html

<progress-bar [min]="0" [max]="100" [progress]="30" [color]="yellow">
</progress-bar>

进度条.ts

 export class ProgressBarComponent {
  @Input()
  progress: number;
  @Input()
  min: number;
  @Input()
  max: number;
  @Input()
  color: any;

  constructor() {
  }

进度条.html

<div style="display:flex;padding-bottom:5px;">
<div class="red" [style.width]="((progress/max) *100) + '%'"></div>
<div class="background-bar" [style.width]="(100-((progress/max) *100)) + '%'"></div>

进度条.scss

.red{
    height:10px;
    margin-top:20px;
    background-color:#E64B55;
     -webkit-transition: width 2s;
transition: width 2s;
}
.yellow{
    height:10px;
    margin-top:20px;
    background-color:#db6623;
     -webkit-transition: width 2s;
transition: width 2s;
}
.background-bar{
    height:10px;
    margin-top:20px;
    margin-left:0px;
    background-color:lightgrey;
}

Answer 1

设置 class={{color}} 对于您想要的

div 的背景颜色 .div class="warning {{color}}" 这种颜色是你从父组件获得

Answer 2

您可以通过在

html 中用空格分隔它们来向元素添加多个类。例如：

<div style="display:flex;padding-bottom:5px;">
<div class="foreground-bar-warning yellow" [style.width]="((progress/max) *100) + '%'"></div>
<div class="background-bar" [style.width]="(100-((progress/max) *100)) + '%'">
</div>

将黄色类添加到第二个div 将使其变为黄色。