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

Question

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

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

我已经在 StackBlitz

上上传了我的代码

单击关于，您将看到页面滚动。手动向上滚动并再次按 About，这次什么都不会发生。我期待您就如何解决此问题提出建议。

Answer 1

发生这种情况是因为您正在使用 Angular 路由器到达片段，该片段动态加载客户端所需的组件，而不向服务器执行新请求。

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

放弃使用 Angular 路由器，只使用旧的普通 <a href="#fragment">。仅仅因为有 Angular 方法可以做到这一点，并不意味着禁止使用标准 HTML 功能
不要更新 URL，这样您的 Web 应用程序就不知道您是否已经单击了锚点，它会始终滚动到该元素。您可以设置属性 [skipLocationChange]="true"，如您在 StackBlitz

this fork

使用 Whosebug 问题

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

当您想到达另一条路线的片段时，请结合使用[routerLink]和[fragment]。不是当你想到达同一条路线内的片段时。

希望对您有所帮助

Answer 2

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

我认为您只是错过了 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。您还可以在此处添加其他设置，例如滚动偏移。

希望对大家有所帮助！

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

Angular Routing with Fragment Hash doesn't work if I click the same anchor twice

angular

angular-routerlink