NgClass 指令

ngClass指令更改绑定到其附加的组件或元素的class属性。有几种不同的方式使用指令。

绑定一个字符串

我们可以直接将一个字符串绑定到属性。这就像添加一个htmlclass属性一样。

  1. @Component({
  2.   selector: 'app-class-as-string',
  3.   template: `
  4.     <p ngClass="centered-text underlined" class="orange">
  5.       <ng-content></ng-content>
  6.     </p>
  7.   `,
  8.   styles: [`
  9.     .centered-text {
  10.       text-align: center;
  11.     }
  13.     .underlined {
  14.       border-bottom: 1px solid #ccc;
  15.     }
  17.     .orange {
  18.       color: orange;
  19.     }
  20.   `]
  21. })
  22. export class ClassAsStringComponent {
  23. }

View Example

在这种情况下，我们直接绑定一个字符串，所以我们避免使用方括号包装指令。还要注意ngClass使用class属性来组合最终的类。

绑定一个数组

  1. @Component({
  2.   selector: 'app-class-as-array',
  3.   template: `
  4.     <p [ngClass]="['warning', 'big']">
  5.       <ng-content></ng-content>
  6.     </p>
  7.   `,
  8.   styles: [`
  9.     .warning {
  10.       color: red;
  11.       font-weight: bold;
  12.     }
  14.     .big {
  15.       font-size: 1.2rem;
  16.     }
  17.   `]
  18. })
  19. export class ClassAsArrayComponent {
  20. }

View Example

在这里，由于我们使用表达式绑定到ngClass指令，我们需要在方括号中包装指令名称。当你想有一个函数放在适用的类名列表时，传入数组是很有用的。

绑定一个对象

最后，一个对象可以绑定到指令。如果该属性为true，Angular 2将该对象的每个属性名称应用于组件。

  1. @Component({
  2.   selector: 'app-class-as-object',
  3.   template: `
  4.     <p [ngClass]="{ card: true, dark: false, flat: flat }">
  5.       <ng-content></ng-content>
  6.       <br>
  7.       <button type="button" (click)="flat=!flat">Toggle Flat</button>
  8.     </p>
  9.   `,
  10.   styles: [`
  11.     .card {
  12.       border: 1px solid #eee;
  13.       padding: 1rem;
  14.       margin: 0.4rem;
  15.       font-family: sans-serif;
  16.       box-shadow: 2px 2px 2px #888888;
  17.     }
  19.     .dark {
  20.       background-color: #444;
  21.       border-color: #000;
  22.       color: #fff;
  23.     }
  25.     .flat {
  26.       box-shadow: none;
  27.     }
  28.   `]
  29. })
  30. export class ClassAsObjectComponent {
  31.   flat: boolean = true;
  32. }

View Example

在这里我们可以看到，由于对象的card 和flat属性是true，这些classes将会生效，但由于dark是false，它不会生效。