在Angular 6中,@HostBinding('class')
和@HostBinding('attr.class')
都是用来绑定宿主元素的class属性的装饰器。它们之间的区别在于如何处理class属性的值。
@HostBinding('class')
装饰器可以用来将一个类的属性绑定到宿主元素的class属性上。它接受一个字符串参数,该参数表示要绑定的class名称。当该类的属性值为真时,宿主元素的class属性会添加该class名称。当该类的属性值为假时,宿主元素的class属性会移除该class名称。
下面是一个示例代码:
@HostBinding('class.active')
isActive: boolean = true;
在这个例子中,当isActive
属性的值为真时,宿主元素的class属性会添加active
类名。
@HostBinding('attr.class')
装饰器也可以用来将一个类的属性绑定到宿主元素的class属性上。不同的是,它会将该类的属性值直接赋给宿主元素的class属性,不会进行类名的添加或移除。
下面是一个示例代码:
@HostBinding('attr.class')
classValue: string = 'blue';
在这个例子中,宿主元素的class属性会被设置为blue
。
总结来说,@HostBinding('class')
装饰器可以用来动态添加或移除类名,而@HostBinding('attr.class')
装饰器则可以直接设置class属性的值。
希望这个解决方法对你有帮助!