角度2 svg - パスの高さと幅を動的に

Question

私は角度2を使用しており、ドーナツチャートを作成しています。私は実装をsvgで行いました。 高さと幅がこれまでに直接渡されて：私が欲しいもの

コンポーネントのHTML

<svg height="200px" width="200px"> blah_blah_blah_blah_ </svg> 

は、主成分からの入力としてこれらの値を渡すことです。

だから、私の問題は、それらを渡す方法をメインHTML

<donut-chart [Height]="200" [Width]="200"></donut-chart> 

Component.jsコード

@Input() Height: number = 100; 
@Input() Width: number = 100; 

です：だから、私はのようなコンポーネントを呼び出すHTMLにそれを言うことができますコンポーネントのhtmlに入力します。

<svg height="Height" width="Width">この場合は動作しません。

助けを歓迎します。

Answer 1

SVGは、プロパティ・バインディングをサポートしていない、それは属性結合

<svg attr.height.px="{{Height}}" attr.width="{{Width}}px"> blah_blah_blah_blah_ </svg> 

または

<svg [attr.height.px]="Height" attr.width="{{Width}}px"> blah_blah_blah_blah_ </svg> 

が

• Angular 2 data attributes
• Double binding angular 2 with SVG
も参照してくださいが必要です
• Bind Angular2 values in SVG linear gradient stop offset?
• Angular2 SVG xlink:href