如何在Angular中动态设置进度条.mat-progress-bar-fill::after样式

伪元素（::before/::after）是浏览器渲染时生成的抽象节点，不属于真实DOM树的一部分，因此没有办法通过document.querySelector直接选中，这就是你调用代码报Cannot read properties of null错误的根本原因。你能正常选中.mat-progress-bar-buffer是因为它是组件渲染出来的真实DOM节点。

优先推荐用CSS变量实现，完全符合Angular的开发规范，不需要侵入式操作全局DOM：

方案1：CSS变量动态传值（推荐） #

1. 先修改组件的静态CSS代码，把固定颜色值替换为CSS变量，同时可以设置默认兜底值：

   ::ng-deep .mat-progress-bar-fill::after {
     background-color: var(--progress-bar-fill-color, red);
   }
   

2. 在模板中给进度条加模板引用标记，方便在组件类中拿到元素实例：

   <mat-progress-bar #progressBar mode="determinate" [value]="progressValue"></mat-progress-bar>
   

3. 在组件类中获取元素引用，动态修改CSS变量的值即可，颜色值可以是接口返回的配置、用户自定义值等任意动态内容：

   import { Component, ViewChild, ElementRef } from '@angular/core';
   
   @Component({
     selector: 'app-your-component',
     templateUrl: './your-component.component.html',
     styleUrls: ['./your-component.component.css']
   })
   export class YourComponent {
     @ViewChild('progressBar') progressBarRef!: ElementRef<HTMLElement>;
   
     // 动态更新颜色的方法，在颜色配置变更时调用即可
     updateProgressBarColor(fillColor: string) {
       this.progressBarRef.nativeElement.style.setProperty('--progress-bar-fill-color', fillColor);
     }
   }
   

   这个方案的优势是样式作用域可控，给哪个进度条元素设置变量，就只会修改对应进度条的颜色，不会全局污染样式。

方案2：动态插入样式标签（适合全局统一配置场景） #

如果页面所有进度条都要统一改成同一个动态颜色，可以通过动态插入全局样式的方式实现：

updateGlobalProgressColor(fillColor: string) {
  // 先移除旧的动态样式，避免重复插入
  const existedStyle = document.getElementById('dynamic-progress-fill-style');
  if (existedStyle) existedStyle.remove();

  const styleNode = document.createElement('style');
  styleNode.id = 'dynamic-progress-fill-style';
  styleNode.textContent = `
    .mat-progress-bar-fill::after {
      background-color: ${fillColor} !important;
    }
  `;
  document.head.appendChild(styleNode);
}

注意这个方案是全局生效的，如果页面存在多个需要不同颜色的进度条，不要用这个方案。

内容的提问来源于stack exchange，提问作者Ste