Angular11中如何动态修改ng-circle-progress的CircleProgressComponent尺寸

针对Angular 11中ng-circle-progress组件的动态尺寸调整需求，以下两种方案均可以实现灵活控制，无需等待官方新增参数：

方案1：CSS样式穿透（适合静态/低频调整尺寸场景） #

不需要手动查询DOM，利用Angular的样式穿透能力直接选中组件内部的svg元素，外层包裹自定义类避免全局样式污染：

1. 给组件外层加自定义容器

<div class="custom-circle-wrap">
  <circle-progress [percent]="80" [radius]="50"></circle-progress>
</div>

2. 在组件样式文件中添加穿透规则

.custom-circle-wrap ::ng-deep svg {
  width: 100px !important;
  height: 100px !important;
}

如果需要响应式适配，直接在媒体查询中修改上述宽高值即可。

方案2：逻辑动态控制（适合随变量实时更新尺寸场景） #

ng-circle-progress本身已内置radius输入参数，组件内部默认监听该参数变化自动触发重绘，直接绑定外部变量即可实现动态调整：

组件逻辑示例 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent {
  // 绑定到radius的动态变量，修改即可触发组件重绘
  circleRadius = 50;

  // 示例：外部触发尺寸修改的方法
  changeCircleSize(targetRadius: number) {
    this.circleRadius = targetRadius;
  }
}

模板绑定 #

<circle-progress 
  [percent]="80" 
  [radius]="circleRadius"
  [showUnits]="false"
></circle-progress>

如果你需要按固定宽高设置而非半径，可自行做简单换算：radius = 目标宽度/2 - 外圈描边宽度，即可精准匹配需要的尺寸。如果确实需要完全自定义svg宽高不受radius约束，也可以通过@ViewChild获取组件实例后，用Renderer2动态设置内部svg的宽高属性，比直接用querySelector查询DOM更符合Angular开发规范。

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