Ionic对接WPBakery版WordPress时内容显示HTML标签如何修复

我是Ionic开发新手，目前已通过REST API完成Ionic应用与基于WPBakery页面构建器搭建的WordPress网站的对接，渲染接口返回内容时遇到异常：
使用如下代码渲染内容时：

<div>
  {{ info.content.rendered }}
</div>

页面未正常展示富文本效果，所有HTML标签被直接作为纯文本输出，异常效果如下：

Ionic基于Angular框架构建，Angular默认的插值语法{{ }}会自动对输出内容做HTML实体转义，这是框架内置的XSS防护机制，会将HTML标签转换为普通文本字符，不会解析为实际DOM元素。

基础修复（90%以上场景适用） #

将插值语法替换为Angular的innerHTML属性绑定即可，框架会自动解析安全范围内的HTML标签并渲染：

<div [innerHTML]="info.content.rendered"></div>

该方式下Angular仍会保留安全校验，自动移除script标签、onclick等危险事件属性，常规的文本、图片、布局、内联样式等WPBakery生成的内容都可正常渲染。

进阶适配（标签/样式被安全策略拦截时使用） #

如果发现WPBakery生成的部分布局标签、内联样式被Angular安全过滤导致显示异常，可通过框架内置的DomSanitizer服务手动标记内容为受信任来源：

1. 在对应页面组件中引入依赖

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

2. 在组件构造函数中注入服务

constructor(private sanitizer: DomSanitizer) {}

3. 增加HTML安全转换方法

parseWpHtml(html: string): SafeHtml {
  // 仅在确认WordPress接口返回内容完全可信时使用该方法
  return this.sanitizer.bypassSecurityTrustHtml(html);
}

4. 修改模板绑定逻辑

<div [innerHTML]="parseWpHtml(info.content.rendered)"></div>

WPBakery专属适配注意事项 #

• 如果渲染后出现布局错乱，可将WPBakery前端依赖的全局CSS文件引入Ionic项目全局样式中，还原原页面的排版效果。
• 如果接口返回内容中存在[vc_row]、[vc_column]这类方括号包裹的WPBakery短代码，说明WordPress侧未在REST API输出时完成短代码解析，需要安装WPBakery的REST API兼容插件，确保content.rendered字段返回的是解析完成的标准HTML内容。

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