我正在开发一个简单的动画库,我的用户可以通过属性绑定来修改我的组件,到目前为止我一直在使用以下方法来应用他们的选择:
<div [style.background]="color" [style.width.px]="width" [style.height.px]="height"></div>
但对于未来的扩展,我希望用[ngStyle] =“styleObject”
来改变整个混乱的情况,以简化添加更多属性,我正在尝试这样做:
[ngStyle]="{...styleObject, newProperty: newValue}"
@Input() width: number;
@Input() height: number;
public styleObject: Object = {
'height': this.height,
'width': this.width
};
但是由于某些原因,<div [ngStyle]="styleObject"></div>
没有考虑上面显示的样式。
请注意,添加 + 'px'
并使用 height.px
并没有解决我的问题。
我看漏了什么?
--
几个测试表明
styleObject = {
'height': 200 + 'px',
'background': 'red'
};
这段代码适用于 div
,但用 this.height
(类型为 number
)替换 200
不行。