在 Angular 单页面应用程序（SPA）中，如何使用路由实现滚动位置恢复

介绍

使用单页面应用程序(SPA)构建应用程序，即使用Angular时，路由非常重要。在SPA中，所有导航都由路由处理，当我们导航到下一个页面时，用户通常希望滚动位置恢复到上一个页面离开时的位置。这对于用户体验是很好的补充措施。在这篇文章中，我们将讨论在Angular应用程序中如何使用路由实现滚动位置恢复。

解决方案

实现滚动位置恢复的解决方案非常简单。我们只需要使用Angular路由器提供的ScrollPositionRestoration选项。使用此选项，我们可以选择将滚动位置恢复到上一个页面离开时的位置，或将滚动位置恢复到页面的顶部。

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled', // 使用这个选项
      anchorScrolling: 'enabled', // 在路由中使用锚点
      scrollOffset: [0, 64], // 滚动位置未锚点时的偏移量
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

如果你希望将滚动位置恢复到上一个页面离开时的位置，可以使用restored选项:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { scrollPositionRestoration: 'restored' }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

完整示例代码

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 64],
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

总结

在这篇文章中，我们学习了如何在Angular SPA应用程序中使用路由实现滚动位置恢复。我们简单地使用了Angular路由器提供的ScrollPositionRestoration选项，这使得滚动位置恢复变得容易。此外，我们还讨论了使用restored选项将滚动位置恢复到上一个页面离开时的位置。在你的下一个Angular应用程序开发中，请确保使用这个简单而方便的选项，以提高用户体验。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a3aff2add4f0e0ffbd4176