Angular 11 + Angular Material 路由器导航默认在底部打开页面？答案

【问题标题】：Angular 11 + Angular Material router navigation opens page at bottom by default?Angular 11 + Angular Material 路由器导航默认在底部打开页面？
【发布时间】：2021-06-22 13:46:57
【问题描述】：

*** 更新 - 我添加了一些指向 StackBlitz 的链接，以复制此问题。嵌套在 my 中似乎是一个问题。如果我从那里删除它，问题就会消失，但是我的材料控制不起作用。这是演示此问题的 StackBlitz。在主页上一直向下滚动，然后单击“关于我”按钮。 https://stackblitz.com/edit/material-haakon

+++原问题+++

在我的主页 (www.haakon.io) 我有几个部分，靠近主页底部的部分之一有一个指向我的食物页面的链接。当您单击页面上的美食链接时，美食页面会正确导航到，但浏览器会滚动到与主页上单击链接的位置相同的位置，即该页面的底部。这是我正在使用的链接：

<p>Go to my <a [routerLink]="['/food']" >foodie</a> page.

我确实在这里看到了几个看起来很相似的问题，我尝试 resetPosition();从两个路由器激活并且当它不起作用时，我尝试从 AfterViewInit 做同样的事情，这也不起作用。这是来自 app.component 的 HTML：

<router-outlet (activate)="resetPosition();"></router-outlet>

这是打字稿组件：

  @ViewChild("mainDiv", {read: ElementRef, static:false})
  mainDiv: HTMLDivElement = document.getElementById("mainDiv") as HTMLDivElement;

  resetPosition() {
    this.mainDiv.scrollTop = 0;
  }

这是一个非常奇怪的行为，我在任何其他版本的 Angular 中都没有注意到。

【问题讨论】：

标签： angular angular-material angular-routing angular11

【解决方案1】：

有多种方法可以做到这一点 -

在您的 resetPosition() 方法中使用以下代码 -

window.scrollTo(0,0)
你可以像这样在路由器配置中使用 {scrollPositionResition: 'enabled'} -

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

您可以阅读更多关于它的信息here

【讨论】：

她是对的，使用{scrollPositionRestoration: 'enabled'}它将应用于所有路由。
尝试了这些解决方案，但它们对我不起作用。我想我可能在创建了一些 StackBlitz 示例之后发现了原因。看起来使用 Angular Material 是个问题。