Angular中如何正确显示Strapi返回的Markdown格式富文本？

直接使用插值语法{{content}}会让Angular自动转义HTML，同时Markdown标记本身不会被浏览器识别，所以需要先把Markdown转成HTML，再安全渲染。

步骤1：安装Markdown解析库 #

使用marked轻量库解析Markdown，执行安装命令：

npm install marked --save

步骤2：修改组件代码 #

导入marked和Angular安全处理工具，将Markdown内容转为安全可渲染的HTML：

import { dataservice } from './service';
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import marked from 'marked';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  content: SafeHtml;

  constructor(
    private data: dataservice,
    private sanitizer: DomSanitizer
  ) {}

  ngOnInit(): void {
    this.getData();
  }

  getData(): void {
    this.dataservice.getContent().subscribe((res) => {
      // 解析Markdown为HTML，并标记为安全内容
      const markdownContent = res.attributes.content;
      const htmlContent = marked(markdownContent);
      this.content = this.sanitizer.bypassSecurityTrustHtml(htmlContent);
    });
  }
}

步骤3：修改模板代码 #

使用[innerHTML]属性渲染处理后的HTML内容：

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

完成以上修改后，Markdown的**Hello**会被解析为<strong>Hello</strong>，页面将显示加粗的Hello文本，实现期望的富文本效果。

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