example - svg circulo para angular2

directives angular 2

Question

Necesito hacer un arco de progreso basado en el porcentaje calculado. He creado una directiva personalizada para acceder a los atributos svg del usuario. Al actualizar eso en mi plantilla, aparece el siguiente error:

"Can''t bind to ''cx'' since it isn''t a known native property ", "Can''t bind to ''cy'' since it isn''t a known native property " etc.

Estoy recibiendo el error anterior para todos los atributos svg.

A continuación se muestra mi código en jade:

progress-arc([size]="200", [strokeWidth]="20", [stroke]="red", [complete]="0.8")

A continuación se muestra mi código de directiva:

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() {
  console.log(''ffffffffffff'',parseFloat(this.strokeWidth));
    alert(''gggggggggg'');
    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;
    console.log(''ggggggggggggggggg'',this.strokeWidthCapped,this.radius,this.circumference);
  }
}

¿Puede alguien decirme a dónde me voy mal?

Answer 1

Para enlazar a los atributos del elemento SVG En angular 2, debe prefijarlos con attr :

Para tu círculo esto será:

<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>

No estoy completamente seguro de si debería ser [attr.stroke-width] o [attr.strokeWidth] , pero dale una oportunidad