Question

我有一个指令的以下实现。在这种情况下如何removeEventListener：

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

Answer 2

这应该可以解决问题：

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

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

    ngOnDestroy(){
        document.removeEventListener('keyup', this.enter, false);
        console.log("Removed event listener"); 
    }
}

希望这有帮助。

干杯， SZ

Answer 3

像这样：

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

@Directive({
    selector: "[Enter]"
})
export class Enter implements OnDestroy{

    private enter: (event: KeyboardEvent) => void;

    constructor(el: ElementRef) {
        this.enter = (event) => {
            if(event.keyCode === 13){
                el.nativeElement.click();
            }
        }
        document.addEventListener('keyup',  this.enter , false);
    }

    ngOnDestroy(){
        document.removeEventListener('keyup', this.enter, false);
    }
}

Answer 4

截至今天，＆＃34; Angular方式＆＃34;是注入一个Renderer2依赖项并使用它，以便在与浏览器不同的平台（例如本机或服务器端渲染）上工作时抽象出实际的DOM操作。

请参阅this SO answer。

Answer 5

工作演示：https://plnkr.co/edit/ZYnlruYQ2HwrQpHZqV9O?p=preview

注意：在DEMO中，我使用模糊事件而不是 ngDestroy 。（出于同样的目的）。如果您在文本框中输入任何内容，它会收听键盘事件，但是当您从文本框输入中退出时，会发生模糊事件，并且没有其他键盘会被解雇。

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

@Directive({
   selector: "[Enter]"
})
export class Enter implements OnDestroy{
    constructor(el: ElementRef) {
      var button=el.nativeElement;
      button.addEventListener('keyup',this.error)
    }

    error(event){
      console.log(event);
        //whatsoever
      if(event.keyCode === 13){
          el.nativeElement.click();
      }
    }

    ngOnDestroy(){
        button.removeEventListener('keyup',this.error); 
    }    
}

在ngOnDestroy中删除EventListener

5 个答案: