Angular实现页面触底时自动跳转到下一个路由

核心思路 #

通过监听页面滚动事件，判断是否到达底部后自动触发下一个路由跳转，配合懒加载路由的预加载策略优化体验，让所有路由呈现类似单页滚动的连续浏览效果。

具体实现步骤 #

1. 维护路由滚动顺序

在根组件（如app.component.ts）中定义好路由的滚动顺序，确保跳转逻辑能准确找到下一个目标路由：

import { Router } from '@angular/router';
import { HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 按实际需要的滚动浏览顺序配置路由路径
  private routeSequence = [
    '/home',
    '/lazy-blog',
    '/lazy-gallery',
    '/lazy-about'
  ];
  private isNavigating = false; // 防抖标志，避免重复触发跳转

  constructor(private router: Router) {}
}

2. 监听滚动并触发跳转

添加滚动监听事件，判断滚动到底部后执行路由跳转，同时重置滚动位置保证连续感：

// 继续在AppComponent中添加以下代码
@HostListener('window:scroll', [])
onWindowScroll() {
  // 计算滚动位置与文档高度，留10px缓冲避免误触发
  const scrollTop = window.scrollY;
  const viewportHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  if (scrollTop + viewportHeight >= documentHeight - 10 && !this.isNavigating) {
    this.navigateToNextRoute();
  }
}

private navigateToNextRoute() {
  this.isNavigating = true;
  const currentUrl = this.router.url;
  const currentIndex = this.routeSequence.indexOf(currentUrl);

  // 若当前路由在序列中且不是最后一个，跳转到下一个路由
  if (currentIndex !== -1 && currentIndex < this.routeSequence.length - 1) {
    const nextRoute = this.routeSequence[currentIndex + 1];
    this.router.navigate([nextRoute]).then(() => {
      // 跳转后平滑滚动到顶部，模拟单页滚动的流畅过渡
      window.scrollTo({ top: 0, behavior: 'smooth' });
      this.isNavigating = false;
    }).catch(() => {
      this.isNavigating = false;
    });
  } else {
    this.isNavigating = false;
  }
}

3. 优化懒加载体验（可选）

为避免滚动到底部时路由模块加载的延迟，可自定义预加载策略，提前加载下一个路由的懒加载模块：

3.1 创建预加载策略服务

// preload-next-route.strategy.ts
import { PreloadingStrategy, Route } from '@angular/router';
import { Observable, of } from 'rxjs';

export class PreloadNextRouteStrategy implements PreloadingStrategy {
  preload(route: Route, load: () => Observable<any>): Observable<any> {
    // 仅对标记了preload: true的懒加载路由进行预加载
    return route.data?.preload ? load() : of(null);
  }
}

3.2 配置路由与预加载策略

在路由配置中给需要预加载的懒加载路由添加data: { preload: true }，并注册自定义预加载策略：

// app-routing.module.ts
import { PreloadNextRouteStrategy } from './preload-next-route.strategy';

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  {
    path: 'lazy-blog',
    loadChildren: () => import('./lazy-blog/lazy-blog.module').then(m => m.LazyBlogModule),
    data: { preload: true }
  },
  {
    path: 'lazy-gallery',
    loadChildren: () => import('./lazy-gallery/lazy-gallery.module').then(m => m.LazyGalleryModule),
    data: { preload: true }
  },
  { path: '**', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadNextRouteStrategy
  })],
  providers: [PreloadNextRouteStrategy],
  exports: [RouterModule]
})
export class AppRoutingModule { }

注意事项 #

• 如果使用自定义滚动容器（而非window），需将滚动监听事件绑定到对应容器元素，同时调整滚动位置的计算逻辑。
• 若路由包含动态参数，需修改routeSequence的匹配逻辑，比如通过路由快照的routeConfig.path进行匹配，而非直接使用router.url。
• 可根据需求调整滚动到底部的触发阈值，或添加过渡动画提升视觉体验。

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