我正在使用 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">在这种情况下不起作用。
欢迎任何帮助。
最佳答案
SVG 不支持属性绑定(bind)，它需要属性绑定(bind)
<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 - 动态传递高度和宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42957204/