Angular Router anchorScrolling 片段未创建正确的 URL答案

【问题标题】：Angular Router anchorScrolling fragment not creating a proper URLAngular Router anchorScrolling 片段未创建正确的 URL
【发布时间】：2019-12-28 23:33:30
【问题描述】：

我在此处按照本教程在 Angular 7+ Here 中进行锚点滚动。

由于路由器从提供的片段生成的 URL，我的锚无法正常工作。

我为我的路由器添加了必要的选项：

@NgModule({
imports: [
RouterModule.forRoot(routes, {
  useHash: true,
  anchorScrolling: "enabled",
  onSameUrlNavigation: "reload",
  scrollPositionRestoration: "enabled"
})
],
exports: [RouterModule]
})
export class AppRoutingModule {}

然后我的模板上有这个：

<a routerLink="." fragment="hw">Hello World Jump</a>

<!-- Some content here. -->

<mat-card>
   <h1 id="hw">Hello World</h1>
</mat-card>

点击链接时，我得到这个 URL： http://localhost:4200/#/#import 其中甚至不包含我的路由页面。

如果我删除 useHash: true, 我会得到这个链接： http://localhost:4200/landing-page#import 这也不正确。我在页面和锚点 ID 之间缺少 /。

当我尝试添加它时，它会被路由器删除。

【问题讨论】：

标签： angular angular-router

【解决方案1】：

你得到的第二个是正确的。锚标记之前没有 /。角度官方指南中也提到了 https://angular.io/api/router/RouterLink

【讨论】：