Angular 中内联样式的 [ngStyle] 和 [style] 之间的区别

Question

在 Angular 中使用

[ngStyle]

和

[style.<attr>]

作为内联样式组件有什么区别？

Answer 1

1. [ngStyle]

   和

   [style]

   之间的主要和明显区别在于输出：
   • 使用

     [style.color]="condition ? 'black' : ''"

     将为所有条件（true 或 false）中的元素添加内联

     color

     样式
   • 但是使用

     [ngStyle]="condition && {'color':'black'}"

     只会在条件为 true 时向元素添加内联

     color

     样式

2. 除此之外，

   [ngStyle]

   还有助于在多种条件下进行样式设计，以获得更好的开发人员体验。例如：

   • 使用

     [style.<attr>]

     ：

     <div [style.color]="hasError ? 'red' : 'black' " [style.font]="font"       [style.background-color]="hasError ? 'tomato' : 'white' ">

   • 使用

     [ngStyle]

     ：

     <div [ngStyle]="currentStyles">
     

     this.currentStyles = {     
         'font-style':  this.canSave  ? 'italic' : 'normal',  
         'color':       this.hasError ? 'red'   : 'black',     
         'font-size':   this.hasError ? '24px'   : '12px'   
     };
     

参考资料：

• https://jscurious.com/ngstyle-vs-style-binding-in-angular/
• https://blog.angulartraining.com/whats-the-difference- Between-style-and-ngstyle-in-angular-68a3301c2ae6