[ngStyle]の角2の設定の背景イメージと色

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エンコードされていると仮定します）。