在InnerHTML中绑定指令/事件

Question

我正在使用Angular 2和以下模板开发基于文本的聊天，该模板以服务的文本/ HTML格式提供：

export class AlertData {
    constructor() {
        this.employmentList = new Array<KeyValue>();
        this.provincesList = new Array<KeyValue>();
        this.alertPeriodRefId = new KeyValue();
    }

    public alertId: number;
    public candidateRefId: number;
    public alertPeriodRefId: KeyValue;
    public creationDate: Date;

    public employmentList: KeyValue[];
    public provincesList: KeyValue[];
}



private createColumnDefs() {
    return [
        { headerName: "Puesto/s", field: "employmentList" },
        { headerName: "Ubicación/es", field:  "provincesList"},
        { headerName: "Periodicidad", field: "alertPeriodRefId.value"}
    ];
}

聊天中的表情可以放在HTML中的任何位置。根据{{​​3}}我目前正在使用<div *ngFor="let message of chatService.messages" class="chatLineContainer"> <span class="chatTimestamp">{{message.formatted_timestamp}}</span><span class="chatUsername">{{message.prefix}}</span><span class="chatColon">:</span><span class="chatText" [innerHTML]="message.chatHTML"></span> </div> 来插入HTML，但不幸的是，它没有编译此代码，因此它没有运行任何绑定，例如事件或指令。

例如，[innerHTML]="message.chatHTML"可能正在使用message.chatHTML指令，如下所示：

tooltip

关于这一点有很多问题，但大多数似乎已过时（例如，建议使用DynamicComponentLoader）和/或对于HTML是动态的并由用户确定的特定情况不清楚。使用普通Javascript和传统事件这样的事情会很简单，但对于Angular2则不是这样，如果有人可以请说明最佳前进方式，以便插入的HTML可以使用指令/事件，这将是值得赞赏的。