在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将自动保持滚动位置,并在路由切换后恢复滚动位置。