Question

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事件或使用棱角钩更好吗？

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

HostListener与Angular 4中的DOM事件

1 个答案: