如果我单击同一个锚点两次，带有片段哈希的 Angular 路由将不起作用

Question

我正在尝试使用锚标记中的片段在页面内重定向。第一次它工作正常，但是当我手动向上滚动页面并再次按锚链接时，它不起作用。

<a class="nav-link page-scroll" [routerLink]="['/']" fragment="home">Home</a>
<a class="nav-link page-scroll" [routerLink]="['/']" fragment="about">About</a>

我已将我的代码上传到StackBlitz

单击“关于”，您将看到页面滚动。手动向上滚动并再次按“关于”，这次不会发生任何事情。我期待您关于如何解决此问题的建议。

Answer 1

尽管这个线程很旧，但我也遇到了同样的问题。

我认为您刚刚错过了 app-routing.module.ts 中的滚动设置

解决方案：

将您的导航代码更改为：

<a class="nav-link page-scroll"routerLink="/" fragment="home">Home</a>
<a class="nav-link page-scroll"routerLink="/" fragment="about">About</a>

并将以下内容添加到您的 app.routing.module.ts 中：

@NgModule({
  imports: [RouterModule.forRoot(routes,
    {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      onSameUrlNavigation: 'reload',
      scrollOffset: [0, 50],
      relativeLinkResolution: 'legacy',
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

您必须启用anchorScrolling 和scrollPositionRestoration。您还可以在此处添加其他设置，例如滚动偏移。

希望它能帮助别人！

Answer 2

发生这种情况是因为您使用 Angular Router 来访问片段，该片段会在客户端动态加载所需的组件，而无需向服务器执行新请求。

您有 3 种可能的解决方案：

1. 放弃使用 Angular Router，只使用旧的普通<a href="#fragment">. 仅仅因为有 Angular 方法可以做到这一点，并不意味着禁止使用标准 HTML 功能

2. 不要更新 URL，这样您的 Web 应用程序就不知道您是否已经单击了锚点，并且它将始终滚动到该元素。您可以设置属性，正如您在StackBlitz 的这个分支[skipLocationChange]="true"中看到的那样

3. 使用此StackOverflow 问题中提供的众多解决方案之一

我认为最好的解决方案是基于<a href.

当您想要到达另一条路线的片段时，请使用[routerLink]组合。当您想要到达同一路线内的片段时则不然。[fragment]

我希望这会有所帮助