angular – 如何在指令中添加/删除类

发布时间：2020-12-17 06:57:29 所属栏目：安全来源：网络整理

导读：我有一个自定义指令,应该能够根据其他条件添加/删除类. 即 // imports @Directive({ selector: '[customDirective]'})export class CustomDirective { constructor(service: SomService) { // code to add class if (service.someCondition()) { // code to

我有一个自定义指令,应该能够根据其他条件添加/删除类.

即

// imports 

@Directive({
    selector: '[customDirective]'
})

export class CustomDirective {
    constructor(service: SomService) {
        // code to add class

        if (service.someCondition()) {
            // code to remove class
        }
    }
}

解决方法

如果您不想使用ngClass指令(提示：您可以将函数传递给[ngClass] =“myClasses()”,如果它会在您的模板中内联乱码),您可以使用Renderer2来添加它一个或多个班级：

export class CustomDirective {

   constructor(private renderer: Renderer2,private elementRef: ElementRef,service: SomService) {
   }

   addClass(className: string,element: any) {
       this.renderer.addClass(element,className);
       // or use the host element directly
       // this.renderer.addClass(this.elementRef.nativeElement,className);
   }

   removeClass(className: string,element: any) {
       this.renderer.removeClass(element,className);
   }

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!