Angular 2 svg - 动态传递高度和宽度

我正在使用 Angular 2 并通过 svg 来创建一个圆环图。 到目前为止，高度和宽度已直接传递：

组件的 html

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

我想要的是将这些值作为主要组件的输入传递。所以，假设我在 html 上调用该组件，如下所示：

主要 HTML

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

组件.js代码

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

所以，我的问题是如何将这些输入传递到组件的 html.

<svg height="Height" width="Width">在这种情况下不起作用。

欢迎任何帮助。

SVG 不支持属性绑定，它需要属性绑定

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

or

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

也可以看看

• Angular 2 数据属性 https://stackoverflow.com/questions/34542619/angular-2-data-attributes/34542844#34542844
• 带 SVG 的双绑定 Angular 2 https://stackoverflow.com/questions/34511929/double-binding-angular-2-with-svg/34513219#34513219
• 在SVG线性渐变停止偏移中绑定Angular2值？ https://stackoverflow.com/questions/41073950/bind-angular2-values-in-svg-linear-gradient-stop-offset/41073962#41073962
• Angular2 SVG xlink:href https://stackoverflow.com/questions/35082657/angular2-svg-xlinkhref/35082700#35082700