使用[ngStyle]和[style.attribute]之间的Angular 2有什么区别

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本身。