Angular 2在Route Change中滚动到顶部

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

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

当前回答

对于iphone/ios safari，您可以使用setTimeout进行包装

setTimeout(function(){
    window.scrollTo(0, 1);
}, 0);

2017-03-08 12:15:56

其他回答

大家好，这在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

如果您使用服务器端呈现，则应该注意不要在服务器上使用窗口运行代码，因为服务器上不存在该变量。这将导致代码被破坏。

export class AppComponent implements OnInit {
  routerSubscription: Subscription;

  constructor(private router: Router,
              @Inject(PLATFORM_ID) private platformId: any) {}

  ngOnInit() {
    if (isPlatformBrowser(this.platformId)) {
      this.routerSubscription = this.router.events
        .filter(event => event instanceof NavigationEnd)
        .subscribe(event => {
          window.scrollTo(0, 0);
        });
    }
  }

  ngOnDestroy() {
    this.routerSubscription.unsubscribe();
  }
}

isPlatformBrowser是一个函数，用于检查当前应用程序所呈现的平台是否是浏览器。我们给它注入platformId。

它也可以检查变量窗口的存在，为了安全起见，像这样:

if (typeof window != 'undefined')

2017-07-27 09:41:44

只需点击动作就可以轻松完成

在你的主组件html引用#scrollContainer

<div class="main-container" #scrollContainer>
    <router-outlet (activate)="onActivate($event, scrollContainer)"></router-outlet>
</div>

在主组件.ts中

onActivate(e, scrollContainer) {
    scrollContainer.scrollTop = 0;
}

2017-06-13 02:38:15

对于iphone/ios safari，您可以使用setTimeout进行包装

setTimeout(function(){
    window.scrollTo(0, 1);
}, 0);

2017-03-08 12:15:56

你也可以在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中滚动到顶部

推荐文章

最新文章

标签