innerHtml 未正确标记（角度）

Question

我使用

control.label

从数据库中提取文本，该数据库是根据用户所在应用程序的哪个部分动态创建的。我需要将一个词（“不”）加粗并加下划线。

在我的 MSSQL 数据库中，我将单词 not 包裹在

<strong>

标签中以使其首先变为粗体，但 Angular 会逐字渲染文本。它显示标签而不是将其加粗。我也尝试过 DomSanitize 和 SafeHtml，但似乎没有任何效果。

在我的数据库中，它基本上位于标签列下的

blah blah blah <strong tags>not blah blah blah

（因此在我的 HTML 组件中调用它时为

control.label

）。然后在我的 HTML 中我这样做：

<div [innerHTML]="control.label"></div>

希望它能够正确渲染动态文本，但事实并非如此。

Answer 1

您需要与 DomSanitizer 合作。 Bcs innerHTML 属性通过删除 HTML 标签来清理内容以防止 XSS。

import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

export class YourComponent {
  safeHtml: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {}


ngOnInit() {
  // this.control is just example
  this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.control.label);
}

}

现在在 HTML 中，您可以像这样处理来自数据库的响应。

<div [innerHTML]="safeHtml"></div>