Angular中HTML代码无法渲染仅显示纯文本，求解决方案

嘿，我明白你现在的困扰：你用Prism生成了带高亮样式的HTML字符串，但在Angular模板里用{{muchoCodo}}绑定后，它只显示纯文本，那些<span>之类的高亮标签根本没被渲染出来。这是因为Angular的默认行为会对插值表达式的内容做转义处理，防止XSS攻击，但这也导致我们的HTML代码没法正常解析。

下面是具体的解决步骤：

1. 替换插值表达式为[innerHTML]绑定 #

首先修改你的HTML模板，把原来的插值写法换成属性绑定：

原来的代码：

<code>{{muchoCodo}}</code>
<!-- 还有页面底部的 -->
{{muchoCodo}}

改成：

<code [innerHTML]="muchoCodo"></code>
<!-- 页面底部的也同理 -->
<div [innerHTML]="muchoCodo"></div>

[innerHTML]是Angular专门用来渲染HTML内容的属性绑定，它会把绑定的字符串当作HTML来解析，而不是纯文本。

2. 标记HTML为安全可信的 #

Angular有个内置的DomSanitizer服务，它会自动过滤掉它认为不安全的HTML内容。虽然我们的HTML是Prism生成的，本身是安全的，但还是需要显式告诉Angular“这个内容是安全的”，避免出现安全警告或者内容被过滤。

修改你的组件代码：

首先导入需要的模块：

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser'; // 新增这一行
declare var Prism;
import 'prismjs';
import 'prismjs/themes/prism-okaidia.css'
import 'prismjs/components/prism-handlebars.min.js'
import 'prismjs/components/prism-lua.min.js'

然后修改组件类的逻辑：

@Component({
  selector: 'app-generated-code',
  templateUrl: './generated-code.component.html',
  styleUrls: ['./generated-code.component.scss'],
  styles: [`
    mat-card {
      margin:2em;
    }
  `]
})
export class GeneratedCodeComponent implements OnInit {
  muchoCodo: SafeHtml; // 把类型从string改成SafeHtml

  constructor(private sanitizer: DomSanitizer) { // 注入DomSanitizer服务
    // 先让Prism生成高亮的HTML字符串
    const highlightedCode = Prism.highlight(`
      import suman = require('suman');
      const {Test} = suman.init(module);
      Test.create((b, it, before) => {
        it('bahru', t => {
        });
      });
    `, Prism.languages.javascript);
    
    // 把生成的HTML标记为安全的
    this.muchoCodo = this.sanitizer.bypassSecurityTrustHtml(highlightedCode);
  }

  ngOnInit() {
  }
}

为什么这样就能正常渲染了？ #

• [innerHTML]会触发Angular的HTML解析逻辑，把字符串里的标签转换成真实的DOM元素，这样Prism的高亮样式就能生效了。
• bypassSecurityTrustHtml方法会告诉Angular，这个HTML内容是我们自己生成的，没有安全风险，所以不会被过滤，那些带类名的<span>标签就能保留下来，配合Prism的CSS样式实现代码高亮。

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