你也可以使用 CSS-in-JS 对象语法

Question

我试图将NgStyle指令与对象变量一起使用，如下所示：

@Component({
      template: `
            <div [ngStyle]="object">
              some test text
           </div>`
    })

export class example {
    private object: string = "{background-color: 'white'}";
}

我也尝试使用object = "background-color: 'red'"和[ngStyle]="{object}"，但似乎它不起作用。我收到消息错误：

错误：未捕获（在承诺中）：由以下原因引起的错误：无法找到不同的支持对象＆＃39; {color：＆＃39; white＆＃39;}＆＃39;（...）consoleError @ VM1051 zone.js @ 0.6.21？main =浏览器：346_loop_1 @ VM1051 zone.js@0.6.21？main =浏览器：371drainMicroTaskQueue @ VM1051 zone.js@0.6.21？main =浏览器：375ZoneTask.invoke @ VM1051 zone.js@0.6。？21主要=浏览器：297

我做错了什么？

Answer 1

不要将string传递给[ngStyle]，传递Object它会有效：

private object: Object = { 'background-color': 'red'};

Answer 2

我在ngStyle上遇到了类似的问题，并修复如下：

[ngStyle]="{'top.px':dtPickerTop, 'left.px':dtPickerLeft}"

dtPickerTop＆amp; dtPickerLeft基于点击事件在我的组件中设置。

添加.px使其有效，而没有它，似乎没有。

Answer 3

你也可以使用 CSS-in-JS 对象语法

这种方式，而不是用引号包围属性字符串，你可以像普通的JS对象一样传递camelCased ?

<div [ngStyle]="{backgroundColor: 'red', borderRadius: '10px', width: '100px' }">

</div>

为了获得更清晰的模板，您始终可以在 TS 文件中定义您的样式对象...

=> .ts

export class MyComponent  {
 
   // ...
  
   stylesObj = {backgroundColor: 'red', borderRadius: '10px', width: '100px' }
}

=> .html

<div [ngStyle]="stylesObj">

</div>

如何在Angular 2中将Object传递给NgStyle指令？

3 个答案:

你也可以使用 CSS-in-JS 对象语法