如何在预览窗口应用PrimeNG Editor生成的样式？

使用PrimeNG Editor实现标题编辑与预览功能时，用户输入带<B>、<I>、<U>标签的内容（比如「Test Title」）后，预览窗口直接显示HTML标签字符串，而非渲染后的样式效果。当前实现代码如下：

<div>
    <div class="form-group mb-2">
        <p-editor class="w-100 form-control"
        [(ngModel)]="enrollment.headerName"
        id="headerName"
        name="headerName"
        placeholder="Enter Title"
        *ngIf="showEditor">
        </p-editor>                
        <div class="invalid-feedback">
            Please provide the Header Name
        </div>
    </div>
</div>
<div>
    <div>Your heading will be shown like below:</div>
    <div><h1>{{ enrollment.headerName }}</h1></div>
</div>

已搜索到使用NgStyle的建议，但不确定是否可通过PrimeNG Editor本身解决，寻求正确渲染预览样式的方法。

Angular默认会对插值表达式{{ }}的内容做转义处理，所以HTML标签会被当成纯文本展示。要实现HTML内容的渲染，不需要依赖NgStyle，直接用Angular的[innerHTML]属性绑定即可解决：

修改预览区域的代码：

<div>
    <div>Your heading will be shown like below:</div>
    <div><h1 [innerHTML]="enrollment.headerName"></h1></div>
</div>

关键说明 #

• [innerHTML]会将绑定的HTML字符串解析成对应的DOM元素并渲染，完美适配PrimeNG Editor输出的带格式HTML内容。
• 安全提示：如果输入内容来自不可信来源，务必先做XSS过滤。PrimeNG Editor默认会过滤危险标签，但如果有自定义配置，需要确保内容的安全性。

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