如何将Angular Templating / Handlebars渲染为由innerHTML绑定的注入HTML - Angular2

Question

我在serperate文件中有一些内容（见下文），基本上我有很多HTML，包含Angular模板。

export var DataProtectionHtml: string = `<a href="{{windowLocation}}#section1">Go to Section 1</a></li>`;

我将导出的变量导入到一个Componenet中。然后我将一个组件属性分配给导出的变量，使用Angular DomSanitizer对其进行清理，然后使用[innerHTML]将其绑定到我的HTML模板中，这里是组件和模板代码（为了清晰起见，我已经减少了代码）

import * as dpHtml from './terms-conditions-text/data-protection.text';

windowLocation: string;
htmlContent: string;

constructor(private location: Location, private sanitizer: DomSanitizer) {

    this.windowLocation = location.prepareExternalUrl(location.path()); // let's say this is "/legal/terms-conditions"
    this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(dpHtml.DataProtectionHtml);
}

这是模板......

<div [innerHTML]="htmlContent"></div>

现在，呈现的页面不会将值this.windowLocation绑定到注入的HTML。渲染时的锚链接将{{windowLocation}}视为字符串，如何输出内容以使角度模板工作。所以我的链接指向“/ legal / terms-conditions＃section1”？

我确实知道我可以使用replace方法，但我不确定这是否是最好的方式，例如：

this.htmlContent = this.sanitizer.bypassSecurityTrustHtml(dpHtml.DataProtectionHtml.replace('{{windowLocation}}', this.windowLocation));

如果我没有在这里解释得很好，我很抱歉，如果是这样，请说出来，我会改写我的问题。

提前致谢。