angular - 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标签

标签： angulartypescriptinnerhtmlangular-directive

Answer 1

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

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

如果您使用的是 ngx-translate：

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

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