Question

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

组件

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

另见