ngClass的几种用法

ngClass：动态绑定css类

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

export class DemoComponent implements OnInit {constructor() { }ngOnInit() {}demoClass() {return {online: true,selected: true}};}