Angular16中如何将无限滚动API调用隔离到MoviesByGenre组件？

1. 问题成因 #

• 全局滚动监听未清理：你在MoviesByGenre组件中绑定了window级别的滚动事件，但组件销毁时未移除该监听。路由切换后组件已被销毁，但监听仍挂在window上，滚动时会触发旧的加载逻辑。
• 状态变量失效：你添加的isLoadMore是组件内部变量，组件销毁后该变量的控制逻辑已不存在，滚动监听触发的旧代码会绕过原本的状态判断，直接发起API请求。
• 监听绑定对象错误：如果监听绑定在全局window而非组件自身的滚动容器上，组件销毁后监听不会随DOM元素自动移除，导致逻辑残留。

2. 最可靠的修复方案 #

核心思路：在组件生命周期内严格管理滚动监听，确保路由切换时彻底清理加载逻辑

方案一：组件销毁时移除全局滚动监听 #

通过手动绑定监听并在ngOnDestroy钩子中移除，彻底切断组件销毁后的事件关联：

import { Component, OnDestroy, OnInit } from '@angular/core';

export class MoviesByGenreComponent implements OnInit, OnDestroy {
  private scrollHandler?: () => void;
  currentPage = 1;
  isLoading = false;
  private isComponentActive = false;

  ngOnInit(): void {
    this.isComponentActive = true;
    // 绑定滚动监听，用箭头函数保证this指向组件实例
    this.scrollHandler = () => this.handleScroll();
    window.addEventListener('scroll', this.scrollHandler);
  }

  private handleScroll(): void {
    // 先判断组件是否活跃、是否在加载、是否已到最大页数
    if (!this.isComponentActive || this.isLoading || this.currentPage >= 10) return;

    // 滚动到底部的判断逻辑
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    
    if (scrollTop + clientHeight >= scrollHeight - 100) { // 预留100px提前加载
      this.loadMoreMovies();
    }
  }

  private async loadMoreMovies(): Promise<void> {
    this.isLoading = true;
    try {
      // 调用TMDB API加载更多电影的逻辑
      // ...
      this.currentPage++;
    } finally {
      this.isLoading = false;
    }
  }

  ngOnDestroy(): void {
    this.isComponentActive = false;
    // 移除滚动监听
    if (this.scrollHandler) {
      window.removeEventListener('scroll', this.scrollHandler);
    }
  }
}

方案二：绑定监听到组件自身滚动容器（推荐） #

如果电影列表在组件内部的滚动容器中（而非全局window），将监听绑定到组件宿主元素，组件销毁时监听会随DOM元素自动移除：

import { Component, HostListener, OnDestroy, OnInit } from '@angular/core';

export class MoviesByGenreComponent implements OnInit, OnDestroy {
  currentPage = 1;
  isLoading = false;
  private isComponentActive = false;

  ngOnInit(): void {
    this.isComponentActive = true;
  }

  // 监听组件自身的滚动事件
  @HostListener('scroll', ['$event'])
  private handleComponentScroll(event: Event): void {
    if (!this.isComponentActive || this.isLoading || this.currentPage >= 10) return;

    const container = event.target as HTMLElement;
    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
      this.loadMoreMovies();
    }
  }

  private async loadMoreMovies(): Promise<void> {
    // 同方案一的加载逻辑
  }

  ngOnDestroy(): void {
    this.isComponentActive = false;
  }
}

方案三：路由守卫额外保障（可选） #

添加CanDeactivate守卫，在离开路由时强制终止未完成的请求并重置状态：

// 定义守卫
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { MoviesByGenreComponent } from './movies-by-genre.component';

@Injectable({ providedIn: 'root' })
export class GenreMoviesGuard implements CanDeactivate<MoviesByGenreComponent> {
  canDeactivate(component: MoviesByGenreComponent): boolean {
    component.isComponentActive = false;
    // 如果用HttpClient发起请求，可通过Subscription取消请求
    if (component.loadSubscription) {
      component.loadSubscription.unsubscribe();
    }
    return true;
  }
}

// 在路由配置中注册
const routes = [
  {
    path: 'by-genre/:id',
    component: MoviesByGenreComponent,
    canDeactivate: [GenreMoviesGuard]
  }
];

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