方法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是否有不同的用例？

Answer 1

最佳实践是采用第二种方法，即使用elementRef和Renderer，因为它可以对html dom元素提供更多控制，请考虑以下示例

import { Component, AfterViewInit, ElementRef, ViewChild } from '@angular/core';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements AfterViewInit {
  name = 'Angular 8 by Example: ElementRef';

  @ViewChild("myDiv") divView: ElementRef;

  ngAfterViewInit(){

    console.log(this.divView);
    this.divView.nativeElement.innerHTML = "Hello Angular 8!";

  }

}

我建议仅在必须定位多个dom元素的情况下才使用elementRef和Renderer，但对于简单下拉菜单（我认为这是您唯一需要更改的元素），可以使用第一种方法。

Answer 2

最好使用@HostBinding（）方法，因为代码看起来比Renderer2方法更干净。

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

只是不要直接操纵DOM。

@HostBinding（）指令和ElementRef / Renderer有什么区别？

方法1-使用@HostBinding（）

方法2-使用ElementRef和Renderer

2 个答案: