angular - 路线更改后以 Angular 滚动到顶部并且新组件加载不起作用

Question

我正在构建一个基本的 Angular 应用程序，我有一些组件，当我进入服务页面时，从我的主页向下滚动，然后返回主页，滚动设置为页面底部。

我想在每次打开组件时将滚动条设置到顶部。

由于我使用的是 angular7，所以我尝试使用路由器中提供的选项，

{scrollPositionRestoration:'已启用'}

然后

{scrollPositionRestoration:'顶部'}，

但它不适用于 Chrome、Chrome 移动版或 Edge。

除此之外，我尝试在路由器上设置监听器并使用window.scrollTop(0,0)，这也不起作用，使用文档变量也不起作用。

我只想让滚动条位于顶部。这是多么幼稚的事情，但现在却让我感到沮丧。

Answer 1

scrollPositionRestoration 也不适合我。我通过不使用 Angular Material 中的“mat-drawer”组件和“scrollPositionRestoration: 'enabled'”来解决这个问题。不幸的是，“mat-drawer-content”的滚动位置无法恢复到之前的滚动状态。如果您没有使用 Angular Material，则可能是其他组件的错误。

如果您想使用“mat-drawer”滚动到顶部，请使用:

// Navigate to the given route
public navigate (route: string): void {
    this.router.navigateByUrl(route)
    document.getElementsByTagName('mat-drawer-content')[0].scrollTo(0, 0)
}