ディレクティブの追加要素からclickイベントを管理するにはどうすればよいですか？

Question

私は角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なのでクリックがこのディレクティブコンテキストの外で呼び出されるためです。それは指令インスタンスの属性にアクセスすることができますので、私はhbElementでクリックでイベントを追加するにはどうすればよい

？

Answer 1

あなたは指令にhighlightをバインドする必要があります。

それを達成するために、あなたは.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; 
} 

plnkr