Angular 2在[ngStyle]中设置背景图像和颜色

Question

我正在使用Angular 2项目并尝试使用[ngStyle]设置背景图像和不透明渐变这些将最终从JSON中拉出变量，否则我会把它们写在我的SCSS文件中。这是我正在尝试使用的代码，但它不起作用。我可以使用[ngStyle]设置背景颜色或图像，但不能同时设置。

<header [ngStyle]="{ 
    'background': 'linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
    rgba(119, 233, 207, 0.5)), 
    url('example.com/image.png') center center/cover no-repeat' 
}"> 

这段代码在我的SCSS文件中给了我完全我想要的结果。

header {   
    background: linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
    rgba(119, 233, 207, 0.5)), 
    url('example.com/img.png'); 
} 

有谁知道是否有可能同时指定一个背景图像和使用[ngStyle]一个不透明的梯度？谢谢！

Answer 1

您在url()属性中使用单引号（'）的问题。 （说实话，我很惊讶它不会引发错误）

删除它们显示您想要的结果：

例如：

<header [ngStyle]="{ 
    'background': 'linear-gradient(0deg, rgba(119, 233, 207, 0.5), 
       rgba(119, 233, 207, 0.5)), 
       url(example.com/img.png) center center/cover no-repeat'}"> 

Working Plnkr

不幸的是，标准转义（\'）在这个小组似乎不起作用xt，但删除单引号也是有效的（假设用于url()的值是URL编码的）。