配置 Angular 独立路由的滚动恢复

本文介绍了如何配置 Angular 独立路由以实现滚动恢复功能，确保在组件切换时，页面滚动位置能够自动重置到顶部。通过 withInMemoryScrolling 特性，我们可以轻松地控制路由的滚动行为，提升用户体验。本文将提供详细的代码示例和配置步骤，帮助开发者快速实现滚动恢复功能。

Angular 独立路由的滚动恢复配置

Angular 路由提供了一种机制来配置滚动恢复，允许开发者控制在导航发生时页面的滚动行为。在单页应用（SPA）中，用户在不同路由之间切换时，保持或重置滚动位置对于提供良好的用户体验至关重要。本文将重点介绍如何使用 Angular 的独立路由配置滚动恢复功能，确保每次路由切换后，页面滚动到顶部。

使用 withInMemoryScrolling 特性

Angular 14 引入了独立组件和独立路由的概念，这使得我们可以更加灵活地配置路由。withInMemoryScrolling 函数是 Angular Router 提供的一个特性函数，它允许我们配置滚动恢复的行为。

以下是配置独立路由以在每次导航后将页面滚动到顶部的步骤：

1. 定义滚动配置： 首先，我们需要定义 InMemoryScrollingOptions 对象，指定 scrollPositionRestoration 属性为 'top'，表示每次导航后滚动到顶部。anchorScrolling 属性可以设置为 'enabled' 以启用锚点滚动。

   

   速创猫AI简历

   一键生成高质量简历

   下载

   import { InMemoryScrollingOptions, withInMemoryScrolling } from '@angular/router';
   
   const scrollConfig: InMemoryScrollingOptions = {
     scrollPositionRestoration: 'top',
     anchorScrolling: 'enabled',
   };

2. 应用滚动特性： 使用 withInMemoryScrolling 函数将滚动配置转换为一个 InMemoryScrollingFeature 对象。

   import { InMemoryScrollingFeature } from '@angular/router';
   
   const inMemoryScrollingFeature: InMemoryScrollingFeature =
     withInMemoryScrolling(scrollConfig);

3. 配置 provideRouter： 在使用 bootstrapApplication 函数启动 Angular 应用时，通过 provideRouter 函数提供路由配置，并将 inMemoryScrollingFeature 作为参数传递。

   import { bootstrapApplication } from '@angular/platform-browser';
   import { provideRouter } from '@angular/router';
   import { App } from './app/app.component';
   import { routes } from './app/app.routes';
   
   bootstrapApplication(App, {
     providers: [provideRouter(routes, inMemoryScrollingFeature)],
   });

完整示例

将以上步骤整合在一起，可以得到以下完整的 main.ts 文件内容：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, InMemoryScrollingOptions, withInMemoryScrolling, InMemoryScrollingFeature } from '@angular/router';
import { App } from './app/app.component';
import { routes } from './app/app.routes';

const scrollConfig: InMemoryScrollingOptions = {
  scrollPositionRestoration: 'top',
  anchorScrolling: 'enabled',
};

const inMemoryScrollingFeature: InMemoryScrollingFeature =
  withInMemoryScrolling(scrollConfig);

bootstrapApplication(App, {
  providers: [provideRouter(routes, inMemoryScrollingFeature)],
});

注意事项

• 确保你的 Angular 版本支持独立路由和 withInMemoryScrolling 特性（Angular 14 及以上）。
• scrollPositionRestoration 属性还可以设置为 'enabled'，表示恢复到之前的滚动位置。
• 如果应用中使用了锚点链接，anchorScrolling 属性设置为 'enabled' 可以确保在导航到锚点时正确滚动到目标位置。

总结

通过 withInMemoryScrolling 特性，我们可以方便地配置 Angular 独立路由的滚动恢复行为。本文提供了一个简单的示例，展示了如何配置路由以在每次导航后滚动到页面顶部。根据实际需求，可以调整 InMemoryScrollingOptions 对象中的属性，以实现更精细的滚动控制。通过合理的滚动恢复配置，可以显著提升 Angular 应用的用户体验。