在 Angular 13 中使用 ngx-translate 防止嵌套段落

Question

我们使用 ngx-translate 在 Angular 13 应用程序中提供多语言支持。这就像一个魅力，除非在翻译字符串中定义了多个段落。例如，翻译 ID MULTILINE 的定义是：

"MULTILINE": "<p>Paragraph 1</p><p>Paragraph 2</p>"

在 HTML 模板中使用它时，我需要使用 innerHTML，因为翻译包含 HTML 我不想被剥离：

<p [innerHTML]="'MULTILINE' | translate"></p>

在结果 dom 中我得到（为便于阅读而添加的格式）：

<p>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</p>

如何防止外部 p 元素出现？翻译字符串是否包含 begin/end p 标签并不重要。

Answer 1

正如 @Amer 所指出的，您需要使用 outerHTML 而不是 innerHTML。 确实需要在翻译字符串中正确使用标签。