Question

我试图将事件绑定到＆＃34;动态＆＃34;由Angular 2中的指令创建的元素，我的代码如下所示：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[myHighlight]'
})
export class HighlightDirective {
  constructor(private el: ElementRef) { }

  @Input() defaultColor: string;

  @Input('myHighlight') highlightColor: string;

  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.highlightColor || this.defaultColor || 'red');
  }

  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(null);
  }

  private highlight(color = "red") {
    this.el.nativeElement.style.backgroundColor = color;
  }

  ngAfterContentInit() {
    var hbElement = document.createElement('button');
    hbElement.innerText = 'Highlight';
    hbElement.addEventListener('click', this.highlight);
    this.el.nativeElement.appendChild(hbElement);
  }
}

但是当我点击hbElement（按钮）时，我收到错误：Cannot read property 'nativeElement' of undefined我想这是因为this.el为null所以在此指令上下文之外调用click。

如何在hbElement中单击添加事件，以便它可以访问Directive实例的属性？

Answer 1

您必须将.bind(this)绑定到指令。

为了实现这一目标，您可以使用ngAfterContentInit() { var hbElement = document.createElement('button'); hbElement.innerText = 'Highlight'; hbElement.addEventListener('click', this.highlight.bind(this)); // Here this.el.nativeElement.appendChild(hbElement); }

private highlight = (color = "red") => {
    this.el.nativeElement.style.backgroundColor = color;
}

或者您可以使用箭头功能

{{1}}

plnkr

如何从指令中的附加元素管理click事件？

1 个答案: