InnerHTML 指令忽略 Angular 中的 html 标签

Question

我想将我的部分文字加粗。

我从特定文件中获取文本。

"INFORMATION": "<b>Here's an </b> example of text"

我会把Here an加粗。

在我的 component.ts 中

ngOnInit() {
  this.definition = INFORMATION
}

在我的 html 模板中

<span [innerHTML]="definition | translate"></span>

我得到的是：

这是一个文本示例

我的期望

这是一个文本示例

这就像 Angular 忽略了 html 标签

Answer 1

这里有问题的不是 Angular，而是翻译管道。

将 HTML 绑定到 [innerHTML]（或 [outerHTML]）是从变量呈现 html 的正确方法，因此问题必须是执行某些逻辑以过滤掉 HTML 标记的翻译管道。

如果您使用的是 ngx-translate：

绑定将在管道第一次解析时正确发生，您将在您的 innerHTML 中获得您的 HTML。

但是下次管道解析时，它只会获取元素的内容。