带有通过 [innerHTML]

问题描述

我试图在最近完成的一个 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 文件的方式：

component.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

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

解决方法

嗯。我认为（还没有测试过）你仍然可以使用 pipeName.transform() 像：

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

这不是理想的解决方案。
不过还是有办法的。