从代码更改角度材质进度条颜色

我们可以创建一个属性指令,它接受颜色值并覆盖 <mat-progress-bar> 对我们来说。

下面是一个工作演示: https://stackblitz.com/edit/material-progress-bar-color-directive

如果我们检查 < 在开发者工具中。我们会发现进度条的颜色在 ::after 像这样的伪元素。

.mat-progress-bar-fill::after {
    background-color: #3f51b5;
}

我们已经知道 直接操纵 https://stackoverflow.com/a/21709814/1160236

所以,我们可以制定一个指令,为我们添加新的样式。

import { Directive, Input, OnChanges, SimpleChanges, ElementRef } from '@angular/core';

@Directive({
  selector: '[appProgressBarColor]'
})
export class ProgressBarColor implements OnChanges{
  static counter = 0;

  @Input() appProgressBarColor;
  styleEl:HTMLStyleElement = document.createElement('style');

  //generate unique attribule which we will use to minimise the scope of our dynamic style 
  uniqueAttr = `app-progress-bar-color-${ProgressBarColor.counter++}`;

  constructor(private el: ElementRef) { 
    const nativeEl: HTMLElement = this.el.nativeElement;
    nativeEl.setAttribute(this.uniqueAttr,'');
    nativeEl.appendChild(this.styleEl);
  }

  ngOnChanges(changes: SimpleChanges): void{
    this.updateColor();
  }

  updateColor(): void{
    // update dynamic style with the uniqueAttr
    this.styleEl.innerText = `
      [${this.uniqueAttr}] .mat-progress-bar-fill::after {
        background-color: ${this.appProgressBarColor};
      }
    `;
  }

}

正如你所看到的,我们在这里所做的一切只是制造一个新的 HtmlStyleElement 并将其添加到宿主元素中。

还有里面 updateColor() 方法我们正在更新 innerText 我们附加的样式标记的。请注意,我们在这里使用了一个具有唯一属性的属性选择器,以便将样式的范围缩小到仅限于宿主。因为我们只想覆盖已应用指令的进度条的样式。

您可以像这样在模板中使用此指令。

<mat-progress-bar [appProgressBarColor]="'orange'"
                  mode="determinate" 
                  value="40"></mat-progress-bar>

更新:

避免使用深度,

有关更多信息,请参阅: The use of /deep/ and >>> in Angular 2

添加此类-->

.green-progress .mat-progress-bar-fill::after {
    background-color: green !important;
}

您的mat进度应该使用上面的类,例如-->

<mat-progress-bar class="green-progress" mode="indeterminate"></mat-progress-bar>

example on stackblitz

1. style HTMLElement 你以后可以参考。
2. 在您想要的任何触发器上(在本例中,它是输入值的更改),清除style元素,将颜色重新分配给定制css,然后重新附加到 head

// in app.component.ts

  styleElement: HTMLStyleElement;
  colors : Array<string> = ["#ff00ff", "#00ff00"];

changeColors() {
  const head = document.getElementsByTagName('head')[0];
  const css = `
  .style1 .mat-progress-bar-fill::after {
    background-color: ${this.colors[0]} !important;
  }

  .style2 .mat-progress-bar-fill::after {
    background-color: ${this.colors[1]} !important;
  }
  `;
  this.styleElement.innerHTML = '';
  this.styleElement.type = 'text/css';
  this.styleElement.appendChild(document.createTextNode(css));
  head.appendChild(this.styleElement);

}

ngOnInit() {
  this.styleElement = document.createElement('style');
  this.changeColors();
}

<!-- In app.component.html -->
<p>
  <mat-progress-bar mode="determinate" value=70 class="style1"></mat-progress-bar>
</p><p>
  <mat-progress-bar mode="determinate" value=40 class="style2"></mat-progress-bar>
</p>
<div><mat-form-field><input matInput type="color" placeholder="Style 1" [(ngModel)]="colors[0]" (change)="changeColors()" /></mat-form-field>
<mat-form-field><input matInput type="color" placeholder="Style 2" [(ngModel)]="colors[1]" (change)="changeColors()" /></mat-form-field></div>

mat-progress-bar

/deep/ .mat-progress-bar-fill::after {
    background-color: green;
}

/deep/ .mat-progress-bar-buffer {
    background: #E4E8EB;
}