Ändern von Attributen Wert in angular2 Vorlage

Question

Ich habe einfach angular2 Komponente:

import {Component} from 'angular2/core'; 
@Component({ 
    selector: 'circle', 
    template: `<svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" 
     stroke-width="3" fill="red" /> 
    </svg>`, 
}) 
export class Circle { } 

Und ich möchte Änderung dynamische fill Attribut einiger Parameter für die Komponente verwendet wird, beispielsweise wie <circle color="red"></circle> und und als Ergebnis hat roten Kreis. Ist es möglich?

Answer 1

Sie könnten die [...]-Syntax mit dem Präfix attr für Ihr Attribut verwenden. Siehe die folgenden:

@Component({ 
    selector: 'circle', 
    template: `<svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" 
     stroke-width="3" [attr.fill]="fillAttr" /> 
    </svg>`, 
}) 
export class Circle { 
    fillAttr:string = 'red'; 
} 

Wenn Sie eine Eingabe an die Komponente zur Verfügung stellen möchten, verwenden Sie die @Input Dekorateur:

@Component({ 
    selector: 'circle', 
    (...) 
}) 
export class Circle { 
    @Input('color') 
    fillAttr:string = 'red'; 
}