は、私は、単純なangular2コンポーネント持っangular2テンプレートで

Question

を属性値を変更する：

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

をそして私は、動的変更したいfill属性を<circle color="red"></circle>のように、たとえば、コンポーネントのいくつかのパラメータを使用して、結果として赤丸を持っています。出来ますか？

Answer 1

アトリビュートの接頭辞がattrの[...]の構文を使用できます。あなたがコンポーネントに入力を提供したい場合は、

@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'; 
} 

@Inputデコレータ使用：以下を参照してください

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