Angular中ngx-quill内容显示为HTML而非原格式的问题求助

在Angular中使用ngx-quill编辑器实现消息发送功能，消息能成功提交到API，但展示时无法呈现编辑器的格式，直接显示HTML文本，需要解决如何显示带格式的内容而非HTML代码。

相关代码 #

chat.service.ts #

add(message: string, conversationId: number){
        const requestBody = {
            message,
            conversationId
        }

        this.http.post('url', requestBody, {
            params: params
        }).subscribe((data: any) => {
            for(let i=0; i<data.result.length; i++){
                this.stringMessages.push(data.result[i])
            }
            console.log(this.stringMessages)
        })

chat.ts #

public text = "";

sendMessage(){
    if(!this.text){
      return;
    }
    
    let cid = this.dataService.tabSelectedConvoID;

    this.chatService.add(this.text, cid);

    console.log(this.text)
    
    this.text="";
}

HTML文件 #

<div *ngFor="let message of displayMessages" >
     <div >
         <p [innerHTML]="message.message">{{message.message}}<p>
     </div>
</div>

<quill-editor [(ngModel)]="text" #editor placeholder="Type your message..."  [styles]="toolbarStyle"> </quill-editor>

1. 发送编辑器的HTML格式内容给API #

ngx-quill默认通过ngModel绑定的是编辑器的纯文本内容，而非带格式的HTML，需要调整逻辑获取编辑器的HTML代码再提交：

首先在组件中获取编辑器实例，修改sendMessage方法：

// 顶部导入必要依赖
import { ViewChild } from '@angular/core';
import { QuillEditorComponent } from 'ngx-quill';

// 组件类中定义编辑器实例
@ViewChild('editor') editor!: QuillEditorComponent;

public text = "";

sendMessage(){
    if(!this.text){
      return;
    }
    
    // 获取编辑器内的HTML内容
    const htmlContent = this.editor.editorInstance.root.innerHTML;
    let cid = this.dataService.tabSelectedConvoID;

    // 提交HTML格式内容到API
    this.chatService.add(htmlContent, cid);
    
    this.text="";
}

2. 修复展示时的重复内容问题 #

当前HTML中<p>标签同时使用了[innerHTML]和插值表达式{{message.message}}，会导致渲染后的格式化内容与原始HTML文本重复显示，需要删除标签内的插值表达式：

<div *ngFor="let message of displayMessages" >
     <div>
         <p [innerHTML]="message.message"></p>
     </div>
</div>

3. 处理API返回的转义HTML（若存在） #

如果API返回的消息内容中HTML被转义（比如显示为<p>这类字符），需要用Angular的DomSanitizer还原成可渲染的格式：

在组件中注入DomSanitizer并编写处理方法：

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

constructor(private sanitizer: DomSanitizer) {}

// 将转义后的HTML转换为安全可渲染的格式
getSafeMessage(html: string): SafeHtml {
    return this.sanitizer.bypassSecurityTrustHtml(html);
}

然后在HTML中调用该方法：

<div *ngFor="let message of displayMessages" >
     <div>
         <p [innerHTML]="getSafeMessage(message.message)"></p>
     </div>
</div>

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