Angular HostListener的通用参数

我正在尝试创建一个指令，该指令接受传递给HostListener的字符串。基本上是停止任何事件的事件传播的指令

import { Directive, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[crmDisableEventPropagation]'
})
export class DisableClickPropagation {
  public myStr: string;

  @HostListener('click', ['$event'])
  public onClick(event: any): void {
    event.stopPropagation();
  }
}

---

现在我已经将

“click”

硬连线作为HostListener参数。但是我想知道是否有一种方法（可能使用泛型或类似的方法）可以对任何类型的事件使用这个指令，而不必为每个事件创建不同的指令。

在

@HostListener

decorator中不能将事件名称用作泛型参数，因为它应该在编译时就知道

但你可以用另一种方法处理事件

例如，你可以试试看

import{指令，Renderer2，Input}来自'@angular/core'；
@指示({
选择器：“[crmDisableEventPropagation]”
})
导出类DisableClickPropagation实现OnInit、OnDestroy{
@输入（'crmDisableEventPropagation'）事件：字符串；
听众：（）=>无效；
构造函数（私有呈现器：Renderer2，私有主机：ElementRef）{}
ngOnInit（）：void{
this.listener=this.renderer.listen(
this.host.nativeElement，
这件事,，
e=>e.stopPropagation（）
);
}
恩贡德斯特罗（）{
this.listener（）；
}
}

现在按如下方式使用它：

some.html

请注意，您也可以使用不同的方法，如observable

fromEvent

---

另请参见

您不能在

@HostListener

装饰器中将事件名称用作泛型参数，因为它应该在编译时知道

但你可以用另一种方法处理事件

例如，你可以试试看

import{指令，Renderer2，Input}来自'@angular/core'；
@指示({
选择器：“[crmDisableEventPropagation]”
})
导出类DisableClickPropagation实现OnInit、OnDestroy{
@输入（'crmDisableEventPropagation'）事件：字符串；
听众：（）=>无效；
构造函数（私有呈现器：Renderer2，私有主机：ElementRef）{}
ngOnInit（）：void{
this.listener=this.renderer.listen(
this.host.nativeElement，
这件事,，
e=>e.stopPropagation（）
);
}
恩贡德斯特罗（）{
this.listener（）；
}
}

现在按如下方式使用它：

some.html

请注意，您也可以使用不同的方法，如observable

fromEvent

另见