时间戳

首页 > 解决方案 > @HostBinding() 指令和 ElementRef/Renderer 有什么区别？

angular - @HostBinding() 指令和 ElementRef/Renderer 有什么区别？

问题描述

我正在为下拉切换构建指令。我所看到的是有两种方法来构建这个指令。最佳实践应该是什么？

方法 1 - 使用 @HostBinding()

@HostBinding('class.open') isOpen: boolean = false;   
@HostListener('click') toggleFunc(){   
   this.isOpen = !this.isOpen;   
}

方法 2 - 使用 ElementRef 和 Renderer

    isOpen: boolean = false;
    constructor(private elementRef: ElementRef, private renderer: Renderer2){}

    @HostListener('click') onToggle(){
        this.isOpen = !this.isOpen;
        if(this.isOpen){
            this.renderer.addClass(this.elementRef.nativeElement, "open");
        }
        else{
            this.renderer.removeClass(this.elementRef.nativeElement, "open");    
        }

}

方法 1 看起来更好，因为它只有 3 行代码（无忧）。但最佳实践应该是什么？创建此类指令时我应该使用什么？
是否@HostBinding()有ElementRef/Renderer不同的用例？

标签： angulartypescriptangular-directive

解决方案

最好使用 @HostBinding() 方法，因为代码看起来比 Renderer2 方法干净得多。

但是，如果您想绕过 Angular 的模板并进行自定义 UI 更改，您应该使用 Renderer2 方法并创建自己的自定义渲染器。https://angular.io/api/core/Renderer2#description

只是不要直接操作 DOM。

推荐阅读