Angular 6 - 当路线改变时保持滚动位置

typescript

Angular 6 中保持滚动位置的路由变化

在使用 Angular 6 开发应用程序时，经常会遇到路由切换时页面滚动位置丢失的问题。这可能会影响用户体验，特别是在单页应用程序中。然而，通过一些简单的技巧和 Angular 的内置功能，可以轻松地保持页面在路由变化时的滚动位置。下面将介绍如何在 Angular 6 中实现这一功能。

解决方案

利用 ScrollPositionRestoration 策略

Angular 6 提供了一个 ScrollPositionRestoration 策略，可以帮助我们保持页面在路由切换时的滚动位置。要使用这个策略，首先需要在应用程序的路由模块中进行配置。

typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Scroll } from '@angular/router';
const routes: Routes = [
  // 定义你的路由配置
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled', // 启用滚动位置还原
      anchorScrolling: 'enabled', // 启用锚点滚动
      scrollOffset: [0, 64], // 设置滚动偏移量，如果需要的话
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

在上面的代码中，scrollPositionRestoration 设置为 'enabled' 可以激活滚动位置的恢复。anchorScrolling 设置为 'enabled' 则启用了锚点的滚动，可以确保在导航到页面内部锚点时也保持正确的滚动位置。scrollOffset 可以用来设置滚动偏移量，以适应顶部导航栏等固定元素的存在。

在组件中处理滚动事件

另一种方法是在每个组件中手动处理滚动事件，以记录并在路由变化时恢复滚动位置。这种方法需要更多的自定义代码，但可以在需要更精细的控制时使用。

typescript
import { Component, HostListener, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.CSS']
})
export class YourComponent implements OnInit {
  private scrollPosition: [number, number] = [0, 0];
  constructor(private router: Router) {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        window.scrollTo(this.scrollPosition[0], this.scrollPosition[1]);
      }
    });
  }
  @HostListener('window:scroll', ['$event'])
  onScroll(event: Event): void {
    this.scrollPosition = [window.scrollX, window.scrollY];
  }
  ngOnInit(): void {
  }
}

在上面的示例中，我们创建了一个 YourComponent 组件，并使用 HostListener 监听 window 的滚动事件。每次滚动时，记录当前的滚动位置。在路由变化时（NavigationEnd 事件），利用 window.scrollTo() 方法将滚动位置设置为之前记录的位置，从而实现滚动位置的恢复。

在 Angular 6 中保持页面在路由变化时的滚动位置，可以通过配置路由模块的 ScrollPositionRestoration 策略来实现，也可以在组件中手动处理滚动事件。根据项目需求和复杂性，选择合适的方法来确保用户在导航时能够保持良好的滚动体验。