Angular 4中的HostListener与DOM事件

Question

Angular 4中的HostListener与DOM事件

所以这个问题是关于编码时的最佳实践。考虑我有一个组件，我想要一个模糊事件。这可以通过两种不同的方式实现。

1. 使用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*/}
   } 

   这里我在输入上放了一个模糊事件，我的组件类中有一个回调函数。
2. 使用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*/}
       } 

   在这里，我使用HostListener实现了相同的功能。我知道这在指令类中使用了很多，但我已经看到很多使用HostListeners的组件示例。

我的问题是：

1. 哪个更清洁，更好实施？
2. 坚持DOM事件或使用角钩是否更好？

Answer 1

我会为那个特殊情况选择Dom事件。但这取决于您是否需要在文档级别上侦听事件，那么您应该使用Hostlistener。同样使用HostListener，您可以选择定义应将哪些值传递给修饰方法。

例：

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