当我以角度 4（现在为 5）从一个组件路由到另一个组件时，页面不会滚动到顶部？

Question

我使用的是 Angular 5，cli 版本是 1.5.2，我面临路由问题。

从一条路线导航到另一条路线，然后向下滚动一点并导航回上一条路线时，页面将保持在相同的滚动位置。 当前从一个视图导航到另一个视图，然后向下滚动一点并导航回上一个视图。页面保持在相同的滚动位置。

但是从一条路线导航到另一条路线时，我需要将页面滚动到顶部。

我还需要知道这是否是 Angular 中的默认路由行为？

Answer 1

Angular 团队在 Angular 6.1 中通过

scrollPositionRestoration

选项解决了这个问题。

请参阅我的回答：https://stackoverflow.com/a/51915623/4899523

Answer 2

您可以注册路由更改监听器

constructor(private router: Router) { }

    ngOnInit() {
        this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0) // for example
        });
    }

Answer 3

scrollPositionRestoration：应用程序路由模块中的“启用”是 Angular 6.1+ 中的解决方案，但在大多数情况下，这可能无法在移动视图中工作。

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
 })

但是使用 document.body.scrollTop = 0;在 ngOnInit 中解决了这个问题。

ngOnInit(): void {
  document.body.scrollTop = 0;
}

Answer 4

如果您只想在从主页组件导航到另一个组件时滚动到顶部，请务必在之后取消订阅。通过取消订阅，您可以确保不会破坏默认的“后退”按钮行为。

subs: Subscription;  
constructor(private router: Router) { }

ngOnInit() {
    this.subs = this.router.events.subscribe((evt) => {
        if (!(evt instanceof NavigationEnd)) {
            return;
        }
        window.scrollTo(0, 0) // for example
        this.subs.unsubscribe();
    });
}