Angular Material textarea如何处理API返回的上标标签内容

原生<textarea>（包括Angular Material封装的matInput文本域）仅支持纯文本渲染，不会解析任何HTML标签，传入的<sup>上标标签会被直接当作普通字符串展示，这是文本域组件的原生特性限制，和框架本身无关。

根据业务场景二选一即可：

• 仅展示内容、不需要用户编辑
  直接移除textarea，将接口返回的内容通过Angular内置的[innerHTML]属性绑定到普通DOM元素上渲染即可，参考代码：

<div class="delete-dialog" style="padding: 10px;">
<form [formGroup]="editForm" id="validate" (ngSubmit)="yes()">
    <mat-form-field>
        <mat-label>内容展示</mat-label>
        <div class="content-wrap" [innerHTML]="editForm.get('title').value"></div>
    </mat-form-field>
    <span *ngIf="!editForm.valid" class="text-danger">{{errorMsg}}</span>
</form>
</div>

注意：如果接口返回的内容不可控，记得先引入Angular的DomSanitizer服务做内容安全处理，规避XSS风险。

• 需要支持用户编辑、同时渲染上标效果
  原生textarea完全不支持富文本渲染，不要尝试硬改原生组件实现，直接替换为适配Angular的富文本编辑器即可：
  • 简单上标/基础富文本需求：可以基于Angular CDK配合contenteditable属性实现轻量富文本输入框
  • 涉及数学公式、复杂格式需求：直接接入成熟的富文本组件，比如ngx-quill、CKEditor5的Angular适配版本，这类组件原生支持上标、公式标签的渲染与编辑。

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