Question

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

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

我想使CLASS值（progress-bar.html）可以更改。

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

main.html

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

进展-bar.ts

 export class ProgressBarComponent {

  @Input()
  progress: number;

  @Input()
  min: number;

  @Input()
  max: number;

  @Input()
  color: any;


  constructor() {
  }

进展-一个bar.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>

进展-bar.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

为你想要背景颜色的div设置class = {{color}} .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将使其变为黄色。

如何将值传递到DIV标记中的CLASS？

2 个答案: