Angular中如何通过路由跳转到组件内的id或class？

嘿，作为Angular新手，你提的这个锚点跳转问题其实挺常见的！答案是肯定的——你完全可以用/A#id这种格式来实现跳转到组件A模板内的指定id元素，下面我给你一步步拆解具体怎么实现：

1. 确认基础路由配置 #

首先确保你已经正确配置了组件A的路由，不需要额外修改路由规则（因为锚点#id属于路由的哈希片段，Angular会自动识别处理）：

const routes: Routes = [
  { path: 'A', component: AComponent }
];

2. 模板内的跳转方式 #

用routerLink指令跳转 #

这是Angular推荐的方式，你可以在任意组件的模板中使用routerLink结合fragment属性指定锚点：

<!-- 从其他组件跳转到A组件的#targetId位置 -->
<a [routerLink]="['/A']" fragment="targetId">跳转到A组件的指定区域</a>

<!-- 如果是在A组件内部跳转，简化写法 -->
<a [routerLink]="[]" fragment="targetId">跳转到当前组件的指定区域</a>

在组件类中通过Router服务跳转 #

如果需要在逻辑代码里触发跳转（比如按钮点击事件），可以注入Router服务来实现：

import { Router } from '@angular/router';

@Component({
  // 组件元数据
})
export class SomeComponent {
  constructor(private router: Router) {}

  navigateToAnchor() {
    // 跳转到/A路径，并定位到#targetId锚点
    this.router.navigate(['/A'], { fragment: 'targetId' });
  }
}

3. 启用锚点滚动行为（关键！） #

Angular默认不会自动滚动到锚点位置，所以需要在路由模块中开启相关配置。打开app-routing.module.ts，修改RouterModule.forRoot的配置项：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    anchorScrolling: 'enabled', // 启用锚点滚动功能
    scrollPositionRestoration: 'enabled', // 可选，路由切换时恢复滚动位置
    scrollOffset: [0, 60] // 可选，设置滚动偏移量，比如避开顶部固定导航栏
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

4. 确保锚点元素存在 #

最后别忘了在A.component.html中添加带有对应id的元素，比如：

<!-- 目标锚点元素 -->
<div id="targetId" class="anchor-section">
  我是你要跳转到的位置！
</div>

这样配置完成后，无论是直接在地址栏输入/A#targetId，还是通过上面的跳转方式，页面都会自动滚动到组件A中id为targetId的元素位置啦。

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