当路由器链路更改时，Angular6 移动到顶部

Question

当路由器链接更改时，我尝试滚动顶部。 所以我在Angular6.15中使用了scrollPositionRestoration，但它不起作用。

在app-routing.module.ts中。....

imports: [RouterModule.forRoot(routes, {
scrollPositionRestoration: 'top'
})],

如何解决这个问题？ 谢谢。

Answer 1

您可以在根模块中执行此操作

import { Router, NavigationEnd } from '@angular/router';
ngOnInit() {
this.routerEvents();
}
routerEvents(): void {
this.router.events.subscribe((evt) => {
if (!(evt instanceof NavigationEnd)) {
return;
}
//!-Scroll Fix
window.scrollTo(0, 0);
});
}

所以它正在做的是订阅路由器，每次导航它都会滚动回顶部

Answer 2

在组件的 .ts 中，您可以使用 window.scrollTo

scrolltop(){
window.scrollTo(0, 0);
}

在组件的.HTML

在可以添加的组件的 .ts 中

<button> (click)="scrolltop()" routerLink="/your link"</button>