NgClass 指令

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

绑定一个字符串

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

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

    .underlined {
      border-bottom: 1px solid #ccc;
    }

    .orange {
      color: orange;
    }
  `]
})
export class ClassAsStringComponent {
}

View Example

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

绑定一个数组

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

    .big {
      font-size: 1.2rem;
    }
  `]
})
export class ClassAsArrayComponent {
}

View Example

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

绑定一个对象

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

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

    .dark {
      background-color: #444;
      border-color: #000;
      color: #fff;
    }

    .flat {
      box-shadow: none;
    }
  `]
})
export class ClassAsObjectComponent {
  flat: boolean = true;
}

View Example

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