Angular5中如何动态传递SVG circle标签的stroke-dashoffset值？

嘿，在Angular 5里动态设置<circle>的stroke-dashoffset其实很直观，咱们用Angular的属性绑定就能轻松搞定，给你几种实用的方案：

方案1：直接绑定组件变量 #

如果你的偏移值是固定或者从组件逻辑里生成的，可以先在组件类里定义一个变量，再通过属性绑定传递给SVG元素：

组件类代码

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  // 这里可以根据业务逻辑动态修改这个值
  dynamicStrokeOffset = 50;
}

模板代码

注意要使用[attr.stroke-dashoffset]语法，因为stroke-dashoffset是原生HTML属性，不是Angular组件的输入属性：

<svg>
  <circle 
    class="donut-segment" 
    data-per="100" 
    cx="21" 
    cy="21" 
    r="15.91549430918954" 
    fill="transparent" 
    stroke="#b1c94e" 
    stroke-width="5" 
    stroke-dasharray="100 100" 
    [attr.stroke-dashoffset]="dynamicStrokeOffset">
  </circle>
</svg>

方案2：根据百分比动态计算偏移值 #

看你给的代码里有data-per属性，大概率是想根据百分比来自动计算stroke-dashoffset，咱们可以把百分比作为输入，用getter或者模板表达式直接计算：

组件类代码（带输入属性）

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

@Component({
  selector: 'app-donut',
  templateUrl: './donut.component.html'
})
export class DonutComponent {
  // 允许父组件传入百分比，默认100%
  @Input() percent: number = 100;

  // 用getter动态计算偏移值，逻辑可以根据你的需求调整
  get strokeOffset(): number {
    // 假设stroke-dasharray的总长度是100，100%对应偏移0，0%对应偏移100
    return 100 - this.percent;
  }
}

模板代码

<svg>
  <circle 
    class="donut-segment" 
    [attr.data-per]="percent"
    cx="21" 
    cy="21" 
    r="15.91549430918954" 
    fill="transparent" 
    stroke="#b1c94e" 
    stroke-width="5" 
    stroke-dasharray="100 100" 
    [attr.stroke-dashoffset]="strokeOffset">
  </circle>
</svg>

使用这个组件

在父组件模板里直接传入百分比即可：

<app-donut [percent]="75"></app-donut>

方案3：直接在模板里写表达式（快速版） #

如果不需要封装组件，直接在当前模板里处理的话，也可以跳过组件变量，直接用模板表达式计算：

假设你组件里有个currentPercent变量：

currentPercent = 100;

模板里直接这么写：

<svg>
  <circle 
    class="donut-segment" 
    [attr.data-per]="currentPercent"
    cx="21" 
    cy="21" 
    r="15.91549430918954" 
    fill="transparent" 
    stroke="#b1c94e" 
    stroke-width="5" 
    stroke-dasharray="100 100" 
    [attr.stroke-dashoffset]="100 - currentPercent">
  </circle>
</svg>

不管用哪种方案，只要你更新对应的变量（比如dynamicStrokeOffset或者percent），Angular都会自动更新SVG的stroke-dashoffset属性，完全符合动态需求~

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