Angular 带有通过 [innerHTML] 插入的模板字符串的管道

Question

我试图在最近完成的 angular 项目之一中实施 ngx-translate。在项目中，我们有一个组件可以在某个 div 到 innerHTML 内呈现 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

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

Answer 1

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

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

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

Angular 带有通过 [innerHTML] 插入的模板字符串的管道

Angular Pipes with template strings that are inserted through [innerHTML]

javascript

html

angular

template-literals

template-strings