Question

当检测到网址更改时，是否存在像滚动到网站顶部的角度？如果没有，如何在打字稿和html文件中重定向（或导航）时滚动到顶部？

编辑：

我在其中一个主题中看到了：

.some-class {
  width: calc(100% - {{ size }};
}

但在我的应用程序中它不起作用。我认为行

存在问题

ngOnInit() {
  this.router.events.subscribe((evt) => {
    if (!(evt instanceof NavigationEnd)) {
      return;
    }
    document.body.scrollTop = 0;
  });
}

，因为当我用console.log（'tmp'）交换它时，它检测到路由改变

Answer 1

router-outlet有一个方法activate，在加载组件时会调用它。您可以利用它并在您的应用程序组件滚动到顶部。所以在app-component：

<router-outlet (activate)="onActivate($event)"></router-outlet>

TS：

onActivate(event: Event) {
  window.scrollTo(0, 0);
}

Answer 2

现在，使用最新更新，您可以在根路由中启用此选项，如下所示-

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

有关更多详细信息，请参见此处-

Deep dive into Angular Routing — Scrolling to top, Debugging and lot more

Angular并在重定向时滚动到顶部

2 个答案: