Angular如何将对象数组中的embed视频代码渲染到HTML页面

Angular 内置了 DOM 安全清理机制，默认会自动过滤动态插入 HTML 中潜在的不安全内容（比如 iframe 标签、内联样式等），即便使用 [innerHTML] 绑定，嵌入视频的核心 iframe 代码也会被清理掉，这就是只能正常显示 title、无法渲染视频的核心原因。

步骤1：导入安全处理依赖 #

在 app.component.ts 头部引入相关模块：

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

步骤2：注入DomSanitizer服务 #

修改组件构造函数，注入安全清理服务：

constructor(private http: HttpClient, private sanitizer: DomSanitizer) {}

步骤3：新增安全HTML转换方法 #

在组件类中添加转换方法，将原始嵌入代码标记为受信任的安全内容：

getSafeEmbedHtml(htmlStr: string): SafeHtml {
  return this.sanitizer.bypassSecurityTrustHtml(htmlStr);
}

步骤4：修改模板绑定逻辑 #

调整 [innerHTML] 的绑定内容，调用上述转换方法：

<div *ngFor="let result of data.videos">
  <p>{{result.title}}</p>
  <p [innerHTML]="getSafeEmbedHtml(result.embed)"></p>
</div>

• 该操作会绕过 Angular 的安全校验，请确保接口返回的 embed 嵌入代码来源完全可信，避免 XSS 攻击风险。
• 你代码中对接口返回数据做的序列化+反序列化操作属于冗余逻辑，可以直接删除，不影响渲染效果还能降低性能开销。

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