Angular2 - 是否可以为 HostListener 使用变量字符串？答案

【问题标题】：Angular2 - Is it possible to use variable string for HostListener?Angular2 - 是否可以为 HostListener 使用变量字符串？
【发布时间】：2017-03-24 08:53:20
【问题描述】：

我不认为这是可能的，但我更愿意问（以防万一）：是否可以做类似的事情：

@Directive({
  selector: '[appTag]'
})
export class TagDirective {
  @Input() appTag: TagEvent;

  private _tagTriggerEvent = 'click';
  @Input() set tagTriggerEvent(triggerEvent: string) {
    this._tagTriggerEvent = triggerEvent || this._tagTriggerEvent;
  }

  constructor(private el: ElementRef, private renderer: Renderer) {
  }

  @HostListener(this._tagTriggerEvent) onTriggerEvent() {
    if (this.appTag) {
      this.sendTag(this.appTag);
    }
  }

  sendTag(tagParam: TagEvent) {
    ...
  }

}

然后这样称呼它：

<div [appTag]="myTagParam">Watch for click on this div</div>
<div [appTag]="myTagParam" [tagTriggerEvent]="mouseenter">Watch for mouseenter on this div</div>

【问题讨论】：

标签： html events angular angular2-directives

【解决方案1】：

不支持。这些装饰器在构建时进行评估。

你可以使用

constructor(private renderer:Renderer, private elementRef:ElementRef) {}

private tagTriggerEventRegistration:Function;
@Input() set tagTriggerEvent(event:string) {
  if(this.tagTriggerEventRegistration) {
    this.tagTriggerEventRegistration(); // cancel previous listener
  }
  this.tagTriggerEventRegistration = this.renderer.listen(this.elementRef.nativeElement, event, (event) => { onTriggerEvent(e);});
}

另见Dynamically add event listener in Angular 2

【讨论】：