在Angular中,可以使用ScrollPositionRestoration
选项来保持滚动位置。以下是一个示例:
RouterModule
和ExtraOptions
。import { RouterModule, ExtraOptions } from '@angular/router';
ExtraOptions
对象,包括scrollPositionRestoration
属性。const routerOptions: ExtraOptions = {
scrollPositionRestoration: 'enabled',
};
ExtraOptions
对象传递给RouterModule.forRoot()
方法。@NgModule({
imports: [RouterModule.forRoot(routes, routerOptions)],
exports: [RouterModule]
})
export class AppRoutingModule { }
HostListener
监听window:scroll
事件,并将滚动位置存储在一个变量中。import { Component, HostListener } from '@angular/core';
@Component({
...
})
export class MyComponent {
scrollPosition = 0;
@HostListener('window:scroll', [])
onWindowScroll() {
this.scrollPosition = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
}
}
通过以上步骤,Angular将自动保持滚动位置,并在路由切换后恢复滚动位置。