ngClass的几种用法

ngClass：动态绑定css类

一. 添加单个类[class.name]=“expression”

isTrue值等于true的时候，添加类名’highlight’

<div class="demo" [class.highlight]="isTrue">
  测试
</div>
1
2
3

二. 添加多个类[ngClass]=“{‘className’:expression}”

1. 多个class和多个条件
条件值为true时添加对应的class

<div class="demo" [ngClass]="{'selected':isSelected,'online':isOnline}">
  测试
</div>
1
2
3

2. 多个class对应同一个条件

isSelected值为true时 同时添加’selected’ 'online’两个类

<div class="demo" [ngClass]="{'selected online':isSelected}">
  测试
</div>

1
2
3
4

3. 多个条件对应同一个class

isSelected 或者 isOnline任意一个值等于true时添加’selected’类

<div class="demo" [ngClass]="{'selected':isSelected || isOnline}">
  测试
</div>
1
2
3

4. 用数组形式添加多个类名

同时添加 ‘selected’,‘isOnline’ 两个类名

<div class="demo" [ngClass]="['selected','isOnline']">
  测试
</div>
1
2
3

5. 不使用数组添加多个类名

同时添加 ‘selected’,‘isOnline’ 两个类名

<div class="demo" [ngClass]="'selected online'">
  测试
</div>
1
2
3

6. 使用方法返回多个class
demoClass函数返回对象{ online: true, selected: true}，因为他们value都是true。所以同时添加’selected’,'isOnline’两个class

<div class="demo" [ngClass]="demoClass()">
  测试
</div>
1
2
3

export class DemoComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

  demoClass() {
    return {
      online: true,
      selected: true
    }
  };
  
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14