具有通过[innerHTML]插入的模板字符串的角度管道

Question

我试图在最近完成的一个angular项目中实现ngx-translate。在这个项目中，我们有一个组件，它通过innerHTML在某个div中呈现HTML文件。现在，当我计划使用管道根据我想要的语言来转换HTML文件文本时，我想将HTML字符串中的文本与模板字符串绑定，如下所示：

<tr>
<th class="border-top-0">${this.test}</th>
// the above is just to verify is pipe works as it will later be changed to:
// ${'HELLO' | translate:param} 
<th class="border-top-0">Description</th>
<th class="border-top-0">Action?</th>
</tr>

我准备在组件中呈现HTML文件的方式：

组件.ts:

this._httpClient.get(path, { responseType: "text" }).subscribe(
data => {
const htmlStr = this.sanitizer.bypassSecurityTrustHtml(data);
this.htmlString = eval('`' + htmlStr + '`');
});
});

.HTML:

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

在完成上述步骤之前，它运行良好，HTML也按预期呈现，但现在，当我尝试使用任何类型的管道时，例如：${this.test | uppercase}，它会给出以下错误：

uppercase is not defined

有什么方法可以达到预期的结果吗？

Answer 1

嗯。我认为(还没有测试过(你仍然可以使用pipeName.transform((，比如：

<th class="border-top-0">
${ this.translationPipe.transform('General Kenobi') }
</th>

这不是理想的解决方案
但这是一个解决方案。