【Angular4】[innerHTML]で埋め込んだタグのイベントを拾う方法

技術ネタ。電車でブログってるから技術ネタが書きづらい書きづらい。

angular4にて、innerHTMLで埋め込む必要があってaタグとかぶっこんでるんだけどイベントが取れない。

以下のようなコードを入れたんだけど普通に無理だった。

import {Component} from 'angular2/core';

@Component({
    selector   : 'sub-child',
    template   : '<form [innerHTML]="html"></form>'
})

export class SubChildClass
{
    private html:string;
    private buttonText:string;

    constructor()
    {
        this.buttonText = 'A new button';
        this.create();
    }

    private create()
    {
        this.html = "<button (click)='new() '>" + this.buttonText + "</button>"
    }

    private new()
    {
        this.buttonText = "Text Changed";
    }
}

余裕で(click)='new()がかき消される。

domでいろいろやれば出来るけどクソめんどいよって記事がstackoverflowにあった（英語だけどそんな感じで書いてあった、リンク忘れたから今度はる）んでクリックイベントを取ってそこから処理を書く方法に変更。

HostListenerってやつ使ってクリックイベント取ってdomる。

///宣言
import { Component, HostListener } from '@angular/core';

// clickイベントを宣言
@HostListener('click', ['$event'])

onClick(event) {
　//ここでいろいろ
}

いやー感覚でangular4いじってたけどこれは感覚じゃわからんかったー。angularくそおもしろい

参考
https://stackoverflow.com/questions/35210072/angular-2-add-events-to-elements-after-the-dom-has-been-created