Question

我正在开发一个简单的animation library，我的用户可以使用属性绑定修改我的组件，到目前为止，我一直在执行以下操作来应用他们的选择：

<div [style.background]="color" [style.width.px]="width" [style.height.px]="height"></div>

但是对于未来的添加，我希望用[ngStyle]="styleObject"来改变整个混乱，以简化添加更多属性，我试图实现这样：

@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，但将200替换为this.height（类型为number）则不然。

Answer 1

Assalamualaikum，

当您使用{"dns": ["<some-ip>", "<other-ip>"]}时，您应该创建一个函数，返回以下内容之一：字符串，数组或对象。

如果要返回Object，请执行以下操作：

在你的模板中：

ngStyle

组件中的

：

<div [ngStyle]="styleObject()"></div>

Answer 2

您可以在ngStyle内枚举多个样式规则：

<img src="..." [ngStyle]="{'height' : size+'px', 'width' : size+'px'}" />

Answer 3

如果您将styleObject定义为this.height，则this.width将被定义为styleObject。至少，在ngOnInit中定义export class YourComponent { styleObject: {[key: string]: string} = {}; @Input() set width(w: string) { styleObject = Object.assign({}, styleObject, {width: w}); } get width() { return styleObject.width; } @Input() set height(h: string) { styleObject = Object.assign({}, styleObject, {height: h}); } get height() { return styleObject.height; } }，其中将保证初始化绑定。

为了获得更动态的感觉，用户可以在渲染组件后更改属性，您可以使用getter / setter。

看起来像这样：

{"userdata": "content of shell script"}

实际上，你可以省略getter。

Answer 4

尝试这种方法

[ngStyle]="isTrue ? {'width': '100%', 'margin-right': '0'} : {}"

Answer 5

我认为Angular已开始提供支持部门。正在Angular: 8.2.14上工作。

键是样式名称，带有可选的。后缀（例如“ top.px”，“ font-style.em”）。

现在您可以使用 [ngStyle]="{'width.px':200, 'height.px':200}"

Answer 6

试试这个方法[ngStyle]="{ backgroundColor: 'blue':'transparent', color: 'white'}"

多种样式的Angular ngStyle

6 个答案: