Angular 2在使用[ngStyle]和[style.attribute]

Question

之間有什麼區別使用Angular 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本身。