帶有通過 [innerHTML] 插入的模板字符串的 Angular Pipes

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} ${this.test | uppercase}它給出了以下錯誤：

uppercase is not defined

有什么辦法可以達到預期的結果嗎？

Answer 1

唔。 我認為（還沒有測試過）你仍然可以使用 pipeName.transform() 像：

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

這不是理想的解決方案。
不過還是有辦法解決的。