我需要根据计算的百分比做一个进度弧,我创建了一个自定义指令来访问用户的 svg 属性,在我的模板中更新该属性时,我收到以下错误:
无法绑定到“cx”,因为它不是已知的本机属性
无法绑定到“cy”,因为它不是已知的本机属性
等等..
我收到所有 svg 属性的此类错误。
下面是我的玉代码:
progress-arc([size]="200", [strokeWidth]="20", [stroke]="red", [complete]="0.8")
下面是我的指令代码:
import {Component,Input,AfterViewInit} from '@angular/core';
@Component({
selector:'progress-arc',
template:`
<svg height="100" width="100">
<circle fill="white"
cx="{{parsedSize/2}}"
cy="{{parsedSize/2}}"
r="{{radius}}"
stroke="{{stroke}}"
stroke-width="{{strokeWidthCapped}}"
stroke-dasharray="{{circumference}}"
stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>
</svg>`,
providers: [],
directives: []
})
export class ProgressArc implements AfterViewInit {
@Input('size') size:string;
@Input('strokeWidth') strokeWidth:string;
@Input('stroke') stroke:string;
@Input('complete') complete:string;
parsedStrokeWidth:number;
parsedSize:number;
parsedComplete:number;
strokeWidthCapped:number;
radius:number;
circumference:number;
ngAfterViewInit() {
this.parsedSize = parseFloat(this.size);
this.parsedStrokeWidth = parseFloat(this.strokeWidth);
this.parsedComplete = parseFloat(this.complete);
this.strokeWidthCapped = Math.min(this.parsedStrokeWidth, this.parsedSize / 2 - 1);
this.radius = Math.max((this.parsedSize - this.strokeWidthCapped) / 2 - 1, 0);
this.circumference = 2 * Math.PI * this.radius;
}
}
有人可以告诉我哪里出错了吗?
为了绑定到 Angular 中的 SVG 元素属性,必须在它们前面加上
attr
:
对于您的圈子,这将是:
<svg height="100" width="100">
<circle fill="white"
[attr.cx]="parsedSize/2"
[attr.cy]="parsedSize/2"
[attr.r]="radius"
[attr.stroke]="stroke"
[attr.stroke-width]="strokeWidthCapped"
[attr.stroke-dasharray]="circumference"
[attr.stroke-dashoffset]="(1 - parsedComplete) * circumference"/>
</svg>
我不完全确定它应该是
[attr.stroke-width]
还是 [attr.strokeWidth]
,但请尝试一下。
当属性没有关联的属性时,您需要使用
attr
前缀
只是想如果有人仍在使用 AngularJS,我会插话。使用 ng-attr- 前缀来插入属性:
<svg height="100" width="100">
<circle fill="white"
cx="{{parsedSize/2}}"
cy="{{parsedSize/2}}"
r="{{radius}}"
stroke="{{stroke}}"
stroke-width="{{strokeWidthCapped}}"
stroke-dasharray="{{circumference}}"
stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>
变成:
<svg height="100" width="100">
<circle fill="white"
ng-attr-cx="{{parsedSize/2}}"
ng-attr-cy="{{parsedSize/2}}"
ng-attr-r="{{radius}}"
ng-attr-stroke="{{stroke}}"
ng-attr-stroke-width="{{strokeWidthCapped}}"
ng-attr-stroke-dasharray="{{circumference}}"
ng-attr-stroke-dashoffset="{{(1 - parsedComplete) * circumference}}"/>
请注意,在这种情况下保留花括号。
如何在reactjs中使用useRef钩子为circle标签cx和cy属性赋值
const Ref = useRef();
Ref.current.setAttribute('cx', x);
Ref.current.setAttribute('cy', y);