Angular 5中调用YouTube API时DOM部分持续刷新问题求助

我来帮你拆解下当前遇到的两个核心问题，以及对应的可行解决方案：

一、DOM区域持续刷新的原因与修复 #

你现在在模板里直接调用getEmbedUrl(id)，这会触发Angular的变更检测机制频繁执行这个函数——因为Angular每次检查视图状态时，都会重新执行模板中的所有表达式，哪怕数据没有变化，这就导致了不必要的DOM刷新。

这里有两种常用的解决思路：

方案1：提前预处理安全URL，避免模板内调用函数 #

在API请求成功后，直接把每个视频的ID和对应的安全嵌入URL一起存入数组，模板直接绑定预处理好的结果，彻底避免重复计算：

// 先定义一个接口规范视频数据结构
interface YoutubeVideo {
  id: string;
  safeEmbedUrl: SafeResourceUrl;
}

// 组件类中声明数组
ytvideolist: YoutubeVideo[] = [];

// ngOnInit中的API请求逻辑修改
ngOnInit() {
  const finalURL = `https://www.googleapis.com/youtube/v3/search?key=${this.api}&channelId=${this.chanId}&part=snippet,id&order=date&maxResults=${this.result}`;
  this.obser$ = this.http.get(finalURL).subscribe(response=>{
    const ytresults = response.json();
    this.ytvideolist = ytresults.items.map(obj => ({
      id: obj.id.videoId,
      safeEmbedUrl: this.sanitizer.bypassSecurityTrustResourceUrl(`https://youtube.com/embed/${obj.id.videoId}`)
    }));
  });
}

模板中直接使用预处理好的安全URL：

<li *ngFor="let video of ytvideolist">
  <iframe [src]="video.safeEmbedUrl" frameborder="0" allowfullscreen></iframe>
</li>

方案2：用纯管道（Pure Pipe）封装安全URL逻辑 #

把getEmbedUrl的逻辑封装成一个纯管道，纯管道只会在输入参数变化时重新计算，不会每次变更检测都执行：

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';

@Pipe({ name: 'youtubeEmbed' })
export class YoutubeEmbedPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(videoId: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(`https://youtube.com/embed/${videoId}`);
  }
}

记得在组件所属的模块中声明这个管道，然后模板中这样使用：

<li *ngFor="let id of ytvideolist">
  <iframe [src]="id | youtubeEmbed" frameborder="0" allowfullscreen></iframe>
</li>

二、取消订阅导致无法获取结果的修复 #

你遇到的取消订阅后拿不到API结果的问题，大概率是取消订阅的时机错误——比如在订阅完成前就取消了，或者没有正确保留订阅实例。这里有两种靠谱的处理方式：

方案1：手动管理订阅（推荐） #

用Subscription对象保存订阅实例，在组件销毁的ngOnDestroy钩子中统一取消，既避免内存泄漏，又不会影响API结果的获取：

import { Subscription } from 'rxjs';

// 组件类中声明订阅对象
private apiSubscription: Subscription;

ngOnInit() {
  const finalURL = `https://www.googleapis.com/youtube/v3/search?key=${this.api}&channelId=${this.chanId}&part=snippet,id&order=date&maxResults=${this.result}`;
  this.apiSubscription = this.http.get(finalURL).subscribe(response => {
    // 原有的响应处理逻辑...
  });
}

ngOnDestroy() {
  // 组件销毁时取消订阅，防止内存泄漏
  if (this.apiSubscription) {
    this.apiSubscription.unsubscribe();
  }
}

方案2：使用async pipe自动管理订阅 #

把Observable直接绑定到模板，用Angular的async pipe自动帮你处理订阅和取消订阅的逻辑，不用手动管理：

// 组件类中声明Observable属性
videos$: Observable<YoutubeVideo[]>;

ngOnInit() {
  const finalURL = `https://www.googleapis.com/youtube/v3/search?key=${this.api}&channelId=${this.chanId}&part=snippet,id&order=date&maxResults=${this.result}`;
  this.videos$ = this.http.get(finalURL).pipe(
    map(response => {
      const ytresults = response.json();
      return ytresults.items.map(obj => ({
        id: obj.id.videoId,
        safeEmbedUrl: this.sanitizer.bypassSecurityTrustResourceUrl(`https://youtube.com/embed/${obj.id.videoId}`)
      }));
    })
  );
}

模板中结合async pipe使用：

<li *ngFor="let video of videos$ | async">
  <iframe [src]="video.safeEmbedUrl" frameborder="0" allowfullscreen></iframe>
</li>

这种方式不仅省去了手动取消订阅的麻烦，还能避免内存泄漏，同时结合了预处理安全URL的逻辑，一举解决两个问题。

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