Angular 2在Route Change中滚动到顶部

在我的Angular 2应用中，当我向下滚动页面并单击页面底部的链接时，它确实会改变路由并将我带到下一页，但它不会滚动到页面顶部。因此，如果第一页很长，第二页内容很少，就会给人一种第二页缺乏内容的印象。因为只有当用户滚动到页面顶部时，内容才可见。

我可以滚动窗口到ngInit组件的页面顶部，但是，有没有更好的解决方案，可以自动处理我的应用程序中的所有路由?

当前回答

这对我来说最适合所有导航更改，包括哈希导航

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this._sub = this.route.fragment.subscribe((hash: string) => {
    if (hash) {
      const cmp = document.getElementById(hash);
      if (cmp) {
        cmp.scrollIntoView();
      }
    } else {
      window.scrollTo(0, 0);
    }
  });
}

2018-01-24 20:10:54

其他回答

您可以向组件添加AfterViewInit生命周期钩子。

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

2017-12-02 20:05:43

从Angular 6.1开始，路由器提供了一个名为scrollPositionRestoration的配置选项，这是为了满足这种情况而设计的。

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

2018-09-11 23:32:32

Angular最近引入了一个新特性，在Angular的路由模块内部做了如下更改

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

2019-08-21 09:56:21

@Fernando埃切维里亚太棒了!但是这段代码不能在哈希路由器或惰性路由器中工作。因为它们不会触发位置更改。可以试试这个:

private lastRouteUrl: string[] = [] ngOnInit(): void { This.router.events.subscribe ((ev) => { const len = this.lastRouteUrl.length if (ev instanceof NavigationEnd) { this.lastRouteUrl.push (ev.url) If (len > 1 && ev。Url === this。lastRouteUrl[len - 2]) { 返回｝窗口。scrollTo (0, 0) ｝ }) ｝

2017-09-01 18:42:05

你也可以在Route.ts中使用scrollOffset。参考Router ExtraOptions

@NgModule({
  imports: [
    SomeModule.forRoot(
      SomeRouting,
      {
        scrollPositionRestoration: 'enabled',
        scrollOffset:[0,0]
      })],
  exports: [RouterModule]
})

2020-10-09 06:40:29

Angular 2在Route Change中滚动到顶部

推荐文章

最新文章

标签