Angular 2在Route Change中滚动到顶部

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

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

当前回答

大家好，这在angular 4中是适用的。你只需要引用父节点来滚动路由器更改

layout.component.pug

.wrapper(#outlet="")
    router-outlet((activate)='routerActivate($event,outlet)')

layout.component.ts

 public routerActivate(event,outlet){
    outlet.scrollTop = 0;
 }`

2018-01-05 09:49:39

其他回答

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

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

2017-12-02 20:05:43

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

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

2020-10-09 06:40:29

如果你只是需要滚动页面到顶部，你可以这样做(不是最好的解决方案，但很快)

document.getElementById('elementId').scrollTop = 0;

2017-09-28 17:15:15

如果你用相同的路径加载不同的组件，那么你可以使用ViewportScroller来实现同样的事情。

import { ViewportScroller } from '@angular/common';

constructor(private viewportScroller: ViewportScroller) {}

this.viewportScroller.scrollToPosition([0, 0]);

2019-10-17 17:36:35

大家好，这在angular 4中是适用的。你只需要引用父节点来滚动路由器更改

layout.component.pug

.wrapper(#outlet="")
    router-outlet((activate)='routerActivate($event,outlet)')

layout.component.ts

 public routerActivate(event,outlet){
    outlet.scrollTop = 0;
 }`

2018-01-05 09:49:39

Angular 2在Route Change中滚动到顶部

推荐文章

最新文章

标签