Angular 设置class名的6种方式

最新推荐文章于 2023-12-21 21:55:31 发布

衣乌安、

最新推荐文章于 2023-12-21 21:55:31 发布

阅读量2.9k

点赞数

分类专栏： angular

随意转载，但请注明出处。倘若略有收获，望不吝点赞

本文链接：https://blog.csdn.net/zSY_snake/article/details/112183473

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Static value

直接给class绑定静态值

<div class="test">
<div class="test1 test2">

Property binding

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

<div [class.test]="true"> </div>

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');}
}