HostListener vs DOM-Ereignisse in Angular 4

Question

HostListener vs DOM-Ereignisse in Angular 4

So ist diese Frage über Best Practices, während Codierung. Betrachten Sie, ich habe eine Komponente, auf der ich ein Unschärfeereignis haben möchte. Dies kann auf zwei verschiedene Arten implementiert werden.

1. den Dom Ereignis verwenden:

   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*/} 
   } 
   

   Hier habe ich eine Unschärfe Ereignis am Eingang gesetzt haben, und ich habe ein Callback-Funktion in meiner Komponentenklasse.

2. Mit 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*/} 
       } 
   

   Hier implementiert ich das gleiche mit HostListener. Ich weiß, dass dies viel in der Direktiven-Klasse verwendet wird, aber ich habe viele Beispiele von Komponenten mit HostListeners gesehen.

Meine Frage hier ist:

1. Welche desto sauberer und eine bessere Umsetzung ist?
2. Ist es besser, bei den DOM-Ereignissen zu bleiben oder mit den eckigen Haken zu gehen?

Answer 1

Ich würde das Dom-Ereignis für diesen bestimmten Fall auswählen. Aber es kommt darauf an, wenn Sie auf Ereignisse auf Dokumentebene warten müssen, dann sollten Sie den Hostlistener verwenden. Mit dem HostListener können Sie optional festlegen, welche Werte an die Decorated-Methode übergeben werden sollen.

Beispiel:

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) { 
    } 
}