在使用innerHTML注入的内容中使用角度模板

Question

我有一个Angular（4）模板，它使用[innerHTML]注入我给它的内容，而这不能改变，因为它是一个外部包。所以最初我有这样的事情：

public getMessages(): InterfaceName {
    return {
        emptyMessage: `<span>Some content!</span>`
    }
}

然后我将其传递给外部元素的模板：

<external-element [messages]="this.getMessages()"></external-element>

这完美无缺。但是，我正在处理的产品需要支持国际化，因此字符串都需要来自单独的JSON文件，而Angular的TranslateService用于检索字符串并对其进行渲染。所以在国际化文件中，我有一组消息，每个消息都会发布到上面的emptyMessage对象中。所以我有这个：

public getMessages(): InterfaceName {
    const messages = this.translate.instant('PATH.TO.JSON.STRINGS');
    return {
        emptyMessage: `
            <div>
                <span *ngFor="let message of messages;">{{ message }}</span>
            </div>`
    }
}

然而，这只是呈现{{message}}，可能是由于引入了XSS攻击的可能性，Angular对HTML进行了清理。我也尝试使用[innerHTML]="message"，但这只是空白。

那么如何从i18n文件中获取内容并进行渲染呢？之后使用innerHTML注入内容，其中我无法控制？