Angular 4中的HostListener与DOM事件

Angular 4中的HostListener与DOM事件

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

使用Dom事件：

view.html

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

在这里，我在输入上放置了一个模糊事件，在我的组件类中有一个回调函数

使用HostListener

组件技术

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

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的组件示例

我的问题是：

哪一个更干净、实施效果更好

坚持使用DOM事件还是使用角度挂钩更好

---

我将为该特定情况选择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) {
    }
}

---

我会选择DOM事件而不是HostListener，除非执行指令。更清楚了。谢谢你的评论。我认为让实现尽可能接近DOM是有意义的。