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

【问题标题】：Angular 2 svg - pass height and width dynamicallyAngular 2 svg - 动态传递高度和宽度
【发布时间】：2017-08-14 21:29:08
【问题描述】：

我正在使用 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"> 在这种情况下不起作用。

欢迎任何帮助。

【问题讨论】：

标签： angular svg

【解决方案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>

另见

【讨论】：

为什么不[attr.height]="Height"？
当然，如果您想将px 传递给Height 和Width 变量值，但问题并未表明这一点，我更喜欢attr.height="{{Height}}px" 而不是[attr.height]="Height + 'px'" （插值而不是+），但这是一个偏好问题。
快速清晰，为我工作！谢谢@GünterZöchbauer
很高兴听到:)
attr.width.px="{{ Width }}" 是一个不错的快捷方式恕我直言，甚至更好[attr.width.px]="Width"