在Angular中,我们可以使用ViewportScroller类来实现scroll-behavior,同时也可以使用Router类的scrollRestoration选项来恢复页面滚动位置。具体实现方法如下所示:
1.在app.module.ts中,引入ViewportScroller和RouterModule,然后将ViewportScroller作为依赖注入到RouterModule中。
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, NavigationEnd } from '@angular/router';
import { ViewportScroller } from '@angular/common';
const routes: Routes = [
// your routes here
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
constructor(private router: Router, private viewportScroller: ViewportScroller) {
// use viewportScroller to implement scroll-behavior
this.router.events.subscribe(event => {
if (event instanceof NavigationEnd) {
this.viewportScroller.scrollToPosition([0, 0]);
}
});
}
}
2.使用scrollRestoration选项来恢复页面滚动位置。
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, NavigationEnd } from '@angular/router';
const routes: Routes = [
// your routes here
];
@NgModule({
imports: [RouterModule.forRoot(routes, {
scrollPositionRestoration: 'enabled'
})],
exports: [RouterModule]
})
export class AppRoutingModule {}
这样,当用户在浏览器中点击前进或后退按钮时,页面滚动位置将被自动恢复。
注意:如果你正在使用Angular 11或更高版本,则不需要在angular.json或package.json中显式指定polyfills文件,因为core-js现在已经自动包含了该文件。