Angular10动态绑定生成的锚点链接点击无法跳转到对应id位置怎么办

问题原因 #

• Angular默认会拦截URL中的hash片段，将其识别为路由跳转请求而非原生锚点定位，你没有配置对应hash的路由规则，所以原生href锚点跳转不会生效。
• 若锚点id包含空格、特殊字符，部分场景下会出现识别匹配异常，进一步导致定位失效。

解决方法 #

方案1：使用ViewportScroller实现无hash跳转（推荐不需要保留锚点在URL的场景） #

这是Angular官方提供的滚动定位工具，不需要修改路由配置，步骤如下：

1. 组件ts文件中注入并封装跳转方法：

import { ViewportScroller } from '@angular/common';

@Component({
  // 你的组件原有配置
})
export class FaqComponent {
  constructor(private viewportScroller: ViewportScroller) {}

  scrollToAnchor(anchorId: string) {
    this.viewportScroller.scrollToAnchor(anchorId);
  }
}

2. 修改HTML中的锚点代码，替换原生href为点击事件：

<a (click)="scrollToAnchor(document.heading)" style="cursor: pointer;">{{document.heading}}</a>

方案2：开启路由锚点配置，保留URL hash #

如果需要刷新页面也能直接定位到对应锚点，修改路由配置即可：

1. 在app-routing.module.ts中开启锚点滚动：

RouterModule.forRoot(routes, {
  anchorScrolling: 'enabled',
  scrollPositionRestoration: 'enabled' // 可选，页面后退时恢复之前的滚动位置
})

2. 修改HTML中的锚点代码，使用Angular自带的fragment属性：

<a [routerLink]="[]" [fragment]="document.heading">{{document.heading}}</a>

额外优化建议 #

• 建议提前对document.heading做格式化处理，将空格、特殊符号替换为短横线或下划线，生成id和锚点时统一使用格式化后的字符串，避免不同浏览器的识别兼容问题。
• 你原有代码中的[text]="document.content"写法错误，需要绑定到对应标签属性上，比如<p [innerText]="document.content"></p>才能正常渲染内容。
• 如果FAQ数据是异步从接口加载的，需要确保数据渲染完成之后再调用滚动方法，避免元素未挂载导致定位失败。

内容的提问来源于stack exchange，提问作者canbrian