如果我连续点击相同的锚点，使用片段哈希进行Angular路由不起作用。
如果我连续点击相同的锚点，使用片段哈希进行Angular路由不起作用。
我正在尝试使用锚点标签中的片段在页面内进行重定向。第一次使用时效果很好，但是当我手动滚动页面并再次点击锚点链接时，它就无法正常工作了。
Home About
我已经将我的代码上传到StackBlitz上。
点击About，你会看到页面滚动。手动向上滚动页面并再次点击About，这次将不会发生任何事情。期待您对如何解决这个问题的建议。
Angular Routing with Fragment Hash doesn't work if I click the same anchor twice是一个问题，它的出现原因是因为使用Angular Router来到达片段，而Angular Router会在客户端动态加载所需的组件，而不会向服务器发送新的请求。解决这个问题有三种可能的方法：
1. 放弃使用Angular Router，而只使用旧的普通<a href="#fragment">。只因为有一种Angular的方法可以做到这一点，并不意味着使用标准的HTML特性是禁止的。
2. 不更新URL，这样你的Web应用程序就不知道你是否已经点击了anchor，它将始终滚动到该元素。你可以通过设置属性[skipLocationChange]="true"来实现，你可以在你的StackBlitz的这个fork中看到。
3. 使用这个StackOverflow问题中提供的许多解决方案之一。
我认为最好的解决方案是基于<a href的解决方案。当你想要到达另一个路由的片段时，使用[routerLink]结合[fragment]。而不是当你想要到达同一个路由内的片段时。
需要注意的是，计划中的href="#fragment在与通常在Angular路由中使用的base href不兼容（参见rogerkeays.com/blog/using-base-href-with-anchors）。
问题原因：在Angular应用程序中，使用片段哈希进行路由时，如果多次点击相同的锚点，可能会出现无法正常工作的问题。
解决方法：在app-routing.module.ts文件中添加以下代码，并将导航代码进行修改。
导航代码修改如下：
Home About
app.routing.module.ts文件修改如下：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
// 路由配置
];
@NgModule({
imports: [RouterModule.forRoot(routes,
{
scrollPositionRestoration: 'enabled',
anchorScrolling: 'enabled',
onSameUrlNavigation: 'reload',
scrollOffset: [0, 50],
relativeLinkResolution: 'legacy',
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
需要在app.routing.module.ts文件中启用anchorScrolling和scrollPositionRestoration，并可以在此处添加其他设置，如滚动偏移量。
希望能对某些人有所帮助！