Angular 16中如何在方法内使用@HostListener？无限滚动问题

1. TS1146错误原因 #

@HostListener是Angular的装饰器，它只能直接用于类的顶层成员（方法或属性），绝对不能放到类的某个方法内部。你把它写在getMoviesByGenre()方法里，完全不符合TypeScript装饰器的语法规则——编译器期望看到的是类成员的声明，结果在方法里碰到了装饰器，所以抛出“Declaration expected”错误。

2. 可行的@HostListener替代方案 #

方案一：把@HostListener移到类层面 #

直接把滚动监听定义成类的独立方法，在方法里判断滚动位置，触发getMoviesByGenre()加载电影：

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

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html'
})
export class MovieListComponent {
  currentPage = 1;
  genreId = 28; // 示例：动作片分类ID

  // 直接在类里用HostListener监听window滚动
  @HostListener('window:scroll')
  onWindowScroll(): void {
    // 计算滚动位置，判断是否接近页面底部
    const scrollPosition = window.scrollY + window.innerHeight;
    const pageHeight = document.body.scrollHeight;
    // 提前100px触发加载，避免用户等太久
    if (scrollPosition >= pageHeight - 100) {
      this.getMoviesByGenre();
    }
  }

  async getMoviesByGenre(): Promise<void> {
    // 这里写调用TMDB API的逻辑，比如：
    // const res = await this.tmdbService.getMovies(this.genreId, this.currentPage++);
    // this.movieList.push(...res.results);
  }
}

方案二：用Renderer2手动管理滚动监听 #

如果需要更灵活控制监听的开启/关闭（比如只在组件可见时监听），可以用Renderer2注册监听，组件销毁时记得移除，防止内存泄漏：

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

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html'
})
export class MovieListComponent implements OnInit, OnDestroy {
  currentPage = 1;
  genreId = 28;
  private scrollListener!: () => void;

  constructor(private renderer: Renderer2) {}

  ngOnInit(): void {
    // 注册window滚动监听
    this.scrollListener = this.renderer.listen('window', 'scroll', () => {
      const scrollPosition = window.scrollY + window.innerHeight;
      const pageHeight = document.body.scrollHeight;
      if (scrollPosition >= pageHeight - 100) {
        this.getMoviesByGenre();
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时移除监听
    this.scrollListener();
  }

  async getMoviesByGenre(): Promise<void> {
    // TMDB API调用逻辑
  }
}

方案三：用RxJS处理滚动事件（推荐防抖） #

如果担心滚动事件触发太频繁导致API请求过多，可以用RxJS的fromEvent监听，搭配debounceTime做防抖处理：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { fromEvent } from 'rxjs';
import { debounceTime, takeUntil } from 'rxjs/operators';
import { Subject } from 'rxjs';

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html'
})
export class MovieListComponent implements OnInit, OnDestroy {
  currentPage = 1;
  genreId = 28;
  // 用于组件销毁时取消订阅
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    // 监听window滚动，防抖300ms，避免频繁触发
    fromEvent(window, 'scroll')
      .pipe(
        debounceTime(300),
        takeUntil(this.destroy$)
      )
      .subscribe(() => {
        const scrollPosition = window.scrollY + window.innerHeight;
        const pageHeight = document.body.scrollHeight;
        if (scrollPosition >= pageHeight - 100) {
          this.getMoviesByGenre();
        }
      });
  }

  ngOnDestroy(): void {
    // 清理订阅
    this.destroy$.next();
    this.destroy$.complete();
  }

  async getMoviesByGenre(): Promise<void> {
    // TMDB API调用逻辑
  }
}

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