角2 svg -通道的高度和宽度动态

Question

我使用角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>

另请参阅

• Angular 2 data attributes
• Double binding angular 2 with SVG
• Bind Angular2 values in SVG linear gradient stop offset?
• Angular2 SVG xlink:href