Angular Fire动态加载iframe遇NG0904错误，DomSanitizer适配Observable问题

1. 在数据服务中集成DomSanitizer #

修改你的data-service.ts，注入DomSanitizer并在Observable数据流中直接处理视频URL为安全资源格式：

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/compat/firestore';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

// 定义阅读数据类型（根据你的实际结构调整）
interface ReadingData {
  id?: string;
  title: string;
  videoUrl: string;
  // 其他字段...
}

@Injectable({ providedIn: 'root' })
export class DataService {
  constructor(
    private afs: AngularFirestore,
    private sanitizer: DomSanitizer // 注入DomSanitizer
  ) {}

  // 获取指定日期的阅读数据，同时处理视频URL为安全格式
  getReadingByDate(date: string): Observable<ReadingData & { safeVideoUrl: SafeResourceUrl }> {
    return this.afs.collection<ReadingData>('readings', ref => 
      ref.where('date', '==', date)
    ).valueChanges().pipe(
      map(data => {
        const item = data[0]; // 假设单日期对应单条数据
        return {
          ...item,
          // 转换URL为嵌入格式并标记安全
          safeVideoUrl: this.sanitizer.bypassSecurityTrustResourceUrl(
            this.convertToEmbedUrl(item.videoUrl)
          )
        };
      })
    );
  }

  // 辅助方法：将普通YouTube URL转为嵌入格式
  private convertToEmbedUrl(originalUrl: string): string {
    // 示例：从https://www.youtube.com/watch?v=XXX转为https://www.youtube.com/embed/XXX
    const videoIdMatch = originalUrl.match(/v=([^&]+)/);
    if (videoIdMatch) {
      return `https://www.youtube.com/embed/${videoIdMatch[1]}`;
    }
    // 已是嵌入URL则直接返回
    return originalUrl;
  }
}

2. 组件中获取处理后的数据 #

在页面组件（如reading-page.component.ts）中，注入数据服务并获取对应日期的数据流：

import { Component, OnInit } from '@angular/core';
import { DataService } from '../services/data-service';
import { Observable } from 'rxjs';
import { ReadingData } from '../services/data-service';

@Component({
  selector: 'app-reading-page',
  templateUrl: './reading-page.component.html',
  styleUrls: ['./reading-page.component.scss'],
})
export class ReadingPageComponent implements OnInit {
  readingData$: Observable<ReadingData & { safeVideoUrl: SafeResourceUrl }>;
  currentDate = new Date().toISOString().split('T')[0]; // 示例：获取当前日期的YYYY-MM-DD格式

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // 根据当前日期拉取阅读数据
    this.readingData$ = this.dataService.getReadingByDate(this.currentDate);
  }
}

3. 模板中绑定安全URL #

在组件HTML模板（reading-page.component.html）中，用async管道订阅数据流并绑定处理后的安全URL：

<ion-content>
  <div *ngIf="readingData$ | async as reading">
    <h2>{{ reading.title }}</h2>
    <!-- 绑定安全视频URL到iframe -->
    <iframe 
      width="100%" 
      height="315" 
      [src]="reading.safeVideoUrl" 
      frameborder="0" 
      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen>
    </iframe>
    <!-- 其他阅读内容区域 -->
  </div>
</ion-content>

关键注意事项 #

• 禁止在模板中直接调用bypassSecurityTrustResourceUrl，必须在服务/组件中处理后再传递给模板，符合Angular安全规范。
• 使用async管道可自动管理订阅与取消，避免内存泄漏，比手动订阅更简洁。
• 确保YouTube URL已转为嵌入格式（https://www.youtube.com/embed/XXX），普通watch链接无法直接嵌入iframe。

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