Angular 设置class名的6种方式

川长思鸟来 2023-01-02 03:23 374阅读 0赞

### Static value ###

直接给`class`绑定静态值

### Property binding ###

单一属性绑定方式，当某个`class`需要根据某个状态（`boolean`、`null`、`undefined`）来判断是否绑定时使用

### Map binding ###

多类绑定方式，当多个`class`需要根据某些状态来判断是否绑定时使用

<div [class]="'test1 test2'"> // string
    <div [class]="['test1', 'test2']"></div> // array
    <div 
        [class]="{
            test1: true,
            test2: false,
            'test3 test 4': true
        }"
    ></div> // object

### ngClass ###

`ngClass`指令方式，用法同`Map binding`

<div [ngClass]="'test1 test2'"> // string
    <div [ngClass]="['test1', 'test2']"></div> // array
    <div 
        [ngClass]="{
            test1: true,
            test2: false,
            'test3 test 4': true
        }"
    ></div> // object

### className ###

直接为`DOM`元素绑[className][]属性。要注意与其他方式同时使用会覆盖`ngClass`、`Map binding` 和 `Static value`方式的设置但不会影响`Map binding`

<div [className]="'test1 test2'"> // string

### HostBinding ###

利用`@HostBinding`装饰器可以结合自定义指令，把一个 `DOM` 属性标记为绑定到宿主的属性,即将`class`属性绑定到宿主属性。要注意`@HostBinding('class')`与其他方式同时使用会覆盖`ngClass`、`Map binding` 和 `Static value`方式的设置。`@HostBinding('class.test123')`方式不会影响

@Directive({selector: '[addTestClass]'})
    export class AddClassTest implements OnInit {
        constructor() { }
        @HostBinding('class.test123')
        test123 = true;
    
        @HostBinding('class')
        test10 = 'test10';
    
        ngOnInit() {console.log('xxxx');}
    }

[className]: https://www.w3school.com.cn/jsref/prop_classname.asp