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

Question

我正在使用Angular 2并创建一个圆环图,我通过svg实现了我的实现.到目前为止,高度和宽度直接传递:

组件的HTML

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

我想要的是将这些值作为主要组件的输入传递.所以,让我们说在html上我调用组件如:

主HTML

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

Component.js代码

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

所以,我的问题是如何将这些输入传递到组件的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>

也可以看看