如何修改Angular Material自动生成的<svg>元素属性

我用以下代码创建mat-progress-bar：

<mat-progress-bar
        name="label"
        mode="buffer"
        [value]="percentage"
        [bufferValue]="percentage + 10"
      >
</mat-progress-bar>

它会生成如下HTML结构：

<svg width="100%" height="4" focusable="false" class="mat-progress-bar-background mat-progress-bar-element">
    <defs>
      <pattern x="4" y="0" width="20" height="4" patternUnits="userSpaceOnUse" id="mat-progress-bar-82">
        <circle cx="2" cy="2" r="2"></circle>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(whatever)"></rect>
</svg>

我想要修改其中pattern的width属性和circle的r属性，于是写了这段代码：

const patterns = document.getElementsByTagName("pattern")
this.renderer.setAttribute(patterns[0],"width",this.width);

这段代码能暂时生效，但Angular会在下一个变更检测周期把属性重置回默认值。我想知道怎么实现对这些自动生成SVG属性的绑定，比如类似这样的写法：

<mat-progress-bar 
        ...
        [attr.svg.defs.pattern.width] = "width"
></mat-progress-bar>

或者有没有办法阻止Angular更新这些属性？我试过扩展matProgressBar组件，但找不到这些属性值的设置位置。另外，这段代码在StackBlitz里能正常运行，但本地环境不行，这也让我很困惑。

解决方案 #

1. 利用变更检测钩子重复设置属性

通过AfterViewChecked钩子，在每次视图检查完成后重新设置目标属性，覆盖Angular的重置操作：

import { AfterViewChecked, ElementRef, Renderer2 } from '@angular/core';

export class YourComponent implements AfterViewChecked {
  width = '30'; // 自定义width值
  circleRadius = '3'; // 自定义circle半径值
  percentage = 50;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngAfterViewChecked() {
    const pattern = this.el.nativeElement.querySelector('pattern');
    const circle = this.el.nativeElement.querySelector('pattern circle');
    
    if (pattern && pattern.getAttribute('width') !== this.width) {
      this.renderer.setAttribute(pattern, 'width', this.width);
    }
    if (circle && circle.getAttribute('r') !== this.circleRadius) {
      this.renderer.setAttribute(circle, 'r', this.circleRadius);
    }
  }
}

加个值判断可以避免不必要的重复DOM操作。

2. CSS样式穿透覆盖（仅视觉需求）

如果只是调整视觉效果，可用::ng-deep穿透Angular的样式隔离，直接覆盖属性：

::ng-deep .mat-progress-bar-background pattern {
  width: 30px !important;
}

::ng-deep .mat-progress-bar-background pattern circle {
  r: 3px !important;
}

注意：::ng-deep属于逐步废弃的特性，需谨慎使用。

3. 扩展MatProgressBar组件修改根源逻辑

找到Angular Material源码中MatProgressBar生成SVG的方法（不同版本位置略有差异，比如15+版本在_renderBackground方法），继承并重写该方法：

import { MatProgressBar } from '@angular/material/progress-bar';
import { ElementRef, Renderer2, Inject } from '@angular/core';
import { MAT_PROGRESS_BAR_LOCALE } from '@angular/material/progress-bar';

export class CustomProgressBar extends MatProgressBar {
  constructor(
    elementRef: ElementRef<HTMLElement>,
    renderer: Renderer2,
    @Inject(MAT_PROGRESS_BAR_LOCALE) locale: string
  ) {
    super(elementRef, renderer, locale);
  }

  private _renderBackground() {
    // 先调用父类方法生成基础结构
    super._renderBackground();
    // 修改目标属性
    const pattern = this._elementRef.nativeElement.querySelector('pattern');
    const circle = pattern?.querySelector('circle');
    
    if (pattern) {
      this._renderer.setAttribute(pattern, 'width', '30');
    }
    if (circle) {
      this._renderer.setAttribute(circle, 'r', '3');
    }
  }
}

在模块中声明自定义组件后，替换原mat-progress-bar使用即可。

本地与StackBlitz差异排查

这种差异大多因Angular/Material版本不一致，或本地开启生产模式导致变更检测逻辑不同。先核对两边的依赖版本，再尝试关闭本地生产模式测试，定位差异原因。

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