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。

但是下次管道解析时它只会占用元素的内容。