angular - 在 ngOnDestroy 中删除 EventListener

Question

我有一个指令的以下实现。在这种情况下如何移除 EventListener:

import { Directive, ElementRef, OnDestroy } from "@angular/core";

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{
    constructor(el: ElementRef) {
        let enter = function(event){
            if(event.keyCode === 13){
                el.nativeElement.click();
            }
        }
        document.addEventListener('keyup', enter , false);
    }

    ngOnDestroy(){
        document.removeEventListener('keyup', enter, false); //this line doesn't work because I can't access enter variable here!
    }
}

我知道我可以在这里简单地使用一个全局变量并可以访问它。但是我不想将实例的状态存储在全局变量中。

Answer 1

我会利用 @HostListener 装饰器来做到这一点:

@Directive({
  selector: "[Enter]"
})
export class Enter {
  @HostListener('document:keyup', ['$event'])
  enter(event) {
    if (event.keyCode !== 13) return;
    this.el.nativeElement.click();
  }
  constructor(private el: ElementRef) { }
} 

处理程序将在 ngOnDestroy 中自动删除。

其他解决方案参见:

• How to listen for mousemove event on Document object in Angular