Angular 12使用DomSanitizer处理Iframe动态src属性时报错问题

问题原因 #

该报错不是Angular的官方Bug，是代码逻辑存在可优化点：

• 你在ngOnInit中仅处理一次url转换，但如果父组件的youtubeUrlList是异步请求获取的，子组件初始化时@Input() url还未完成赋值，此时this.url为undefined，传入安全校验方法后返回的值不符合iframe src的类型要求，底层调用replace方法时就会抛出类型错误。
• 另外如果youtubeUrlList中存在非字符串类型的元素，也会触发该报错。

修复方案 #

1. 子组件改用Input变化监听替代单次初始化处理 #

子组件类修改为：

export class YoutubeCardComponent implements OnChanges {
  @Input() url?: string
  safeSource?: SafeResourceUrl
  constructor(private sanitizer: DomSanitizer) { }

  ngOnChanges(changes: SimpleChanges) {
    // 仅当url存在且发生变更时，重新处理安全链接
    if (changes['url'] && this.url && typeof this.url === 'string') {
      this.safeSource = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
    }
  }
}

2. 子组件模板增加非空渲染判断 #

避免safeSource为空时绑定到iframe属性：

<iframe *ngIf="safeSource" [src]="safeSource"></iframe>

3. 父组件提前过滤无效链接 #

在父组件赋值youtubeUrlList前，过滤掉非字符串、不符合YouTube嵌入规则的无效值：

// 示例：处理原始链接列表
this.youtubeUrlList = rawList.filter(link => {
  return typeof link === 'string' && link.startsWith('https://www.youtube.com/embed/')
})

按上述方案调整后即可解决报错。

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