Angular 2 SVG - 实时传递高度和宽度

Question

我正在使用Angular 2，并通过SVG创建一个甜甜圈图表。 目前已直接传递高度和宽度：

组件的html代码

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

我希望的是将这些数值作为输入从主组件传递进去。因此，假设在HTML中我这样调用组件：

主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">不能起作用。
欢迎任何帮助。

- Georgios

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数据属性
• 使用SVG双向绑定Angular 2
• 如何将Angular2值绑定到SVG线性渐变的停止偏移量中？
• Angular2中的SVG xlink:href属性

- Günter Zöchbauer

---

为什么不用[attr.height]="Height"呢？ - a better oliver

快速而清晰，对我很有帮助！谢谢@GünterZöchbauer - Georgios

很高兴听到这个好消息 :) - Günter Zöchbauer

attr.width.px="{{ Width }}" is a nice shortcut IMHO, or even better [attr.width.px]="Width" - Mateo Tibaquira

我刚试了一下，似乎不再需要 px 了（实际上当我尝试时并没有起作用）。这个可以工作：<svg [attr.width]="Width" [attr.height]="Height" xmlns="http://www.w3.org/2000/svg">...</svg> - yannick1976

Answer 2

宽度和高度是简单的组件输入属性。在我看来，没有必要处理在值后面添加“px”：

<svg
[attr.width]="width"
[attr.height]="height"
>

- JanBrus