角度 2 svg - 动态通过高度和宽度

Question

我用角2,我创建一个甜甜圈图

组件的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中。

欢迎任何帮助。




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>

另请参阅

< li >角度2数据属性 < with SVG双装订角度2 < li >在SVG线性渐变停止偏移中绑定Angular2值？ < li>Angular2 SVG xlink:href