HostListener vs événements DOM dans angulaire 4

Question

HostListener vs événements DOM dans angulaire 4

Donc, cette question est sur les meilleures pratiques tout en codage. Considérons que j'ai un composant sur lequel je veux un événement de flou. Cela peut être mis en œuvre de 2 manières différentes.

1. Utilisation de l'événement Dom:

   view.html

   <input (blur)="onBlur($event)"/> 
   

   component.ts

   @Component({ 
   selector: 'input-component' 
   template: require('path to view.html') 
   }) 
   export class InputComponent(){ 
       public onBlur(event: Event){ /*on blur action*/} 
   } 
   

   Ici, j'ai mis un événement de flou sur l'entrée et j'ai fonction de rappel dans ma classe de composants.

2. En utilisant HostListener

   component.ts

   import { HostListener } from '@angular/core'; 
   @Component({ 
       selector: 'input-component' 
       template: require('path to view.html') 
       }) 
       export class InputComponent(){ 
        @HostListener('blur', ['$event']) onBlur(event: Event) { /*on blur action*/} 
       } 
   

   Ici, je mis en œuvre la même chose avec HostListener. Je sais que cela est beaucoup utilisé dans la classe directive, mais j'ai vu beaucoup de exemples de composants avec HostListeners.

Ma question est ici:

1. Quelle est la mise en œuvre plus propre et mieux?
2. Vaut-il mieux coller aux événements DOM ou aller avec les crochets angulaires?

Answer 1

Je sélectionnerais l'événement Dom pour ce cas particulier. Mais cela dépend si vous avez besoin d'écouter les événements au niveau du document, alors vous devriez utiliser le Hostlistener. En utilisant également HostListener, vous pouvez éventuellement définir quelles valeurs doivent être passées à la méthode décorée.

Exemple:

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core'; 

@Directive({ 
    selector: '[clickOutside]' 
}) 
export class ClickOutsideDirective { 
    constructor(private _elementRef : ElementRef) { 
    } 

    @Output() 
    public clickOutside = new EventEmitter(); 

    @HostListener('document:click', ['$event.target']) 
    public onClick(targetElement) { 
    } 
}