В чем разница между директивой @HostBinding () и ElementRef / Renderer? - PullRequest
Новая
       54

В чем разница между директивой @HostBinding () и ElementRef / Renderer?

0 голосов
/ 02 ноября 2019

Я строю директиву для выпадающего переключателя. То, что я видел, есть два подхода для создания этой директивы. Какой должна быть лучшая практика?

Подход 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 разные варианты использования?

1 Ответ

0 голосов
/ 02 ноября 2019

Лучшей практикой является использование второго подхода, который заключается в использовании 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!";

  }

}

Я бы предложил использовать elementRef иРендерер только тогда, когда вам нужно нацелиться на несколько элементов dom, но в вашем случае для простого раскрывающегося списка (который, я думаю, единственный элемент, который вам нужно изменить) вы можете использовать первый метод.

...