Angular 5绑定CSS类：class，[class.foo]，[ngClass]

Question

所以我已经使用Angular 5很长一段时间了。我想到了这个问题：将CSS类绑定到元素的最佳方法是什么。

1. class="{{ foo }}"

   这种绑定方式使我们有机会在.ts文件中创建CSS类名，将逻辑放在.ts文件中，然后在HTML中使用这个给定的CSS类，如下所示：{{ foo }}。< / LI>

   示例：

   // foo.component.ts
   ...
   export class FooComponent {
     someBool = true;
     foo = someBool ? 'error' : 'success'; // dummy logic
   }
   ...
   
   // foo.component.html
   ...
   <div class="{{ foo }}"></div>
   ...
   

   1. [class.error]="foo"

      这样我们就可以使用.ts变量来切换特定的CSS类

   示例：

   // foo.component.ts
   ...
   export class FooComponent {
     someBool = true;
     foo = someBool; // dummy logic
   }
   ...
   
   // foo.component.html
   ...
   <div [class.error]="foo"></div>
   ...
   

   1. [ngClass]="{'error': foo, 'success': !foo}"

      这个允许我们添加许多CSS类，imho它是最可读的。

   示例：

   // foo.component.ts
   ...
   export class FooComponent {
     someBool = true;
     foo = someBool; // dummy logic
   }
   ...
   
   // foo.component.html
   ...
   <div [ngClass]="{'error': foo, 'success': !foo}"></div>
   ...
   

   因此，请您知道，在您看来，这是进行CSS类绑定的最佳方式。我知道，可能有其他方法可以这样做 - 让我知道它们。