[ngStyle]と[style.attribute]を使用する場合の角度2の違い

Question

角度2を使用する場合、次の2つのオプションを使用してスタイルに変数値を渡す方法の違いは何ですか？長所と短所がありますか、それとも個人的な選択ですか、他の用途のための柔軟性があります。

オプション1

<div [ngStyle]="{ 'background-image': 'url(' + image + ')'}"> 

オプション2

<div [style.background-image]="'url(' + image + ')'"> 

関連：

Attribute property binding for background-image url in Angular 2

How to add background-image using ngStyle (angular2)?

Answer 1

オプション1

<div [ngStyle]="{ 'background-image': 'url(' + image + ')'}">

スタイルは、式の値に応じて更新され、コンポーネント内に設定されています。一度に複数のインラインスタイルを追加するときは、これを使用することをお勧めします。

// Component 

stylize() { 
    let style = { 
    'font-style': 'italic', 
    'font-weight': 'bold' 
    }; 
    return style; 
} 



// Template 

<div [ngStyle]="stylize()"> 
    This font is italic and bold. 
</div> 

オプション2

<div [style.background-image]="'url(' + image + ')'">

あなたが持っているように、これは、インラインスタイリングすることができます： たとえば、次のような何かをしたいことがあります。しかし、これはそのdiv自体のためだけに機能します。