HostListener与Angular 4中的DOM事件

问题描述：

HostListener与Angular 4中的DOM事件HostListener与Angular 4中的DOM事件

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

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

在这里，我已经把一个模糊事件的输入，我有一个我的组件类中的回调函数。

使用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的例子。

我的问题在这里：

哪个是更清洁和更好的实现？
坚持使用DOM事件还是使用角钩会更好吗？

我会在HostListener除非做了指示选择DOM事件。这更清楚。 – DeborahK

感谢您的评论。我认为尽量保持实现尽可能接近DOM是有意义的。 – ronakvp

答

我会选择那个特定情况下的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) { 
    } 
}

HostListener与Angular 4中的DOM事件

相关推荐