• https://angular.io/guide/template-syntax#ngClass

    a) 普通写法

    1. <!-- 标准class绑定写法 -->
    2. <div class="bad curly special">Bad curly special</div>
    3. <!--使用bind来覆盖之前的所有class  -->
    4. <div class="bad curly special"
    5.    [class]="badCurly">Bad curly</div>
    6. <!--通过isSpecial属性来切换special样式 -->
    7. <div [class.special]="isSpecial">The class binding is special</div>

    b) 使用NgClass指令

    NgClass 指令接收一个对象，对象的 key 指定 css 类名，value 给定一个布尔值，当布尔值为真则作用该类名，当布尔值为假则移除给类名。
    语法规则：
    1. <div [ngClass]="{
    2. css类名: 布尔值,
    3. css类名: 布尔值
    4. }">测试文本</div>

基本示例：

  1. .saveable{
  2.     font-size: 18px;
  3. } 
  4. .modified {
  5.     font-weight: bold;
  6. }
  7. .special{
  8.     background-color: #ff3300;
  9. }
  10. currentClasses = {
  11.     'special': true,
  12.     'modified':true,
  13.     'saveable':true
  14. };
  1. <div [ngClass]="{'special':true,'saveable':true}">This div is initially saveable, unchanged, and special</div>
  2. <div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>