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編碼的）。