Angular ngx-infinite-scroll路由切换后滚动触发失效问题咨询

问题根源 #

同一组件复用不同路由时，首次触发滚动加载后切换路由，ngx-infinite-scroll的内部滚动状态未被重置，导致后续滚动无法触发onScrollDown()。而多次触发后切换路由正常，是因为此时组件内部状态已完成多次更新，路由切换时的状态冲突被覆盖。

解决方案 #

1. 获取无限滚动组件实例 #

在组件中通过ViewChild获取InfiniteScrollDirective实例，方便后续手动控制状态：

import { Component, ViewChild, OnInit } from '@angular/core';
import { InfiniteScrollDirective } from 'ngx-infinite-scroll';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  @ViewChild(InfiniteScrollDirective) infiniteScroll!: InfiniteScrollDirective;
  currentPage = 1;
  dataList: any[] = [];

  constructor(private router: Router) {}

  // ... 其他业务代码
}

2. 监听路由变化，重置滚动状态 #

利用Router的events监听路由切换完成事件，在路由切换时重置页面滚动位置、分页状态，同时强制重置无限滚动组件的内部状态：

ngOnInit() {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    // 重置页面滚动到顶部
    window.scrollTo(0, 0);
    // 重置分页参数
    this.currentPage = 1;
    // 清空现有数据（根据业务需求调整，比如保留筛选后的初始数据）
    this.dataList = [];
    // 重置无限滚动组件状态
    if (this.infiniteScroll) {
      // 手动触发组件销毁与初始化逻辑，重置内部状态
      this.infiniteScroll.ngOnDestroy();
      this.infiniteScroll.ngOnInit();
      // 延迟执行滚动检查，确保DOM更新完成
      setTimeout(() => {
        this.infiniteScroll.checkScroll();
      }, 0);
    }
    // 加载当前路由对应的初始数据
    this.loadData(this.currentPage);
  });
}

3. 简化重置方案（可选） #

如果调用组件生命周期钩子有顾虑，可直接重置滚动位置参数并触发检查：

this.infiniteScroll.currentScrollPosition = 0;
setTimeout(() => {
  this.infiniteScroll.checkScroll();
}, 0);

验证效果 #

路由切换后，页面自动滚动到顶部，分页参数重置，无限滚动组件内部状态被清空，此时滚动页面会正常触发onScrollDown()加载数据。

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