Angular 2如何渲染外部数据库HTML字符串并正常显示样式？

哈哈，这个问题我之前也碰到过！其实核心原因是你定义的htmlString里的HTML标签是转义后的实体字符（比如<就是<的转义形式），Angular的[innerHTML]只会识别原始的HTML代码，不会自动帮你把转义字符还原，所以就直接把标签文本显示出来了。下面给你几个实用的解决办法：

1. 直接使用未转义的原始HTML字符串 #

如果是你自己在组件里定义的字符串，直接写原始HTML就行，不要用转义后的字符：

// component.ts
htmlString = '<div style="color: red">Hello world!</div>';

然后模板里还是用<div [innerHTML]="htmlString"></div>，这时候就能正常渲染红色的Hello world了。

如果是从外部数据库/后端获取的内容，要确保后端返回的是原始HTML代码，而不是转义后的实体字符串。

2. 手动将转义字符还原为原始HTML #

如果因为某些限制，只能拿到转义后的字符串，那可以在组件里或者写一个管道来处理转义字符：

方法一：组件内直接处理 #

在组件的ngOnInit里把转义字符转回去：

// component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  htmlString = '<div style="color: red">Hello world!</div>';
  unescapedHtml!: string;

  ngOnInit(): void {
    const tempElement = document.createElement('div');
    tempElement.innerHTML = this.htmlString;
    // 这里innerHTML会自动还原转义字符
    this.unescapedHtml = tempElement.innerHTML;
  }
}

然后模板里绑定处理后的变量：

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

方法二：写一个通用的转义还原管道 #

如果多个组件都需要这个功能，写个管道更方便：

// unescape-html.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({ name: 'unescapeHtml' })
export class UnescapeHtmlPipe implements PipeTransform {
  transform(value: string): string {
    if (!value) return value;
    const tempElement = document.createElement('div');
    tempElement.innerHTML = value;
    return tempElement.innerHTML;
  }
}

记得在你的模块里声明这个管道：

// your-module.module.ts
import { NgModule } from '@angular/core';
import { UnescapeHtmlPipe } from './unescape-html.pipe';

@NgModule({
  declarations: [UnescapeHtmlPipe],
  exports: [UnescapeHtmlPipe]
})
export class YourModule {}

之后在模板里直接用管道处理：

<div [innerHTML]="htmlString | unescapeHtml"></div>

3. 处理Angular的安全拦截 #

有时候即使你用了原始HTML，内联样式还是不生效，这是因为Angular的安全机制会自动清理它认为不安全的内容（比如内联样式、脚本标签）。这时候需要用DomSanitizer把HTML标记为安全内容：

// component.ts
import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  htmlString = '<div style="color: red">Hello world!</div>';
  safeHtml!: SafeHtml;

  constructor(private sanitizer: DomSanitizer) {
    // 标记HTML为安全内容
    this.safeHtml = this.sanitizer.bypassSecurityTrustHtml(this.htmlString);
  }
}

模板里绑定安全后的变量：

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

这个方法也可以和上面的转义还原结合起来，先转义还原，再标记为安全。

内容的提问来源于stack exchange，提问作者kenzolek