如何解决Angular中手动输入带#锚点的URL时锚点被自动删除的问题

原因说明 #

Angular默认路由初始化逻辑会优先处理路由路径匹配，未主动保留URL中的锚点片段，你设置的useHash: true作用是开启Hash路由模式，将路由路径放在hash段，和页面内定位用的锚点功能无关，因此无法解决该问题。

修复方案 #

• 方案1：修改路由全局配置
  在AppRoutingModule的RouterModule.forRoot参数中开启锚点滚动支持：

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    // 开启锚点滚动功能
    anchorScrolling: 'enabled',
    // 开启滚动位置恢复，避免路由跳转时复位
    scrollPositionRestoration: 'enabled'
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

• 方案2：手动兼容初始URL锚点
  如果配置路由参数后仍不生效，可以在根组件AppComponent中主动读取初始URL的锚点并补回：

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { ViewportScroller } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private router: Router,
    private viewportScroller: ViewportScroller
  ) {}

  ngOnInit(): void {
    // 读取初始URL的锚点内容
    const initFragment = window.location.hash.slice(1);
    if (!initFragment) return;
    // 监听首次路由完成事件
    const routeSub = this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // 补回URL锚点
        window.location.hash = initFragment;
        // 滚动到对应锚点位置
        this.viewportScroller.scrollToAnchor(initFragment);
        // 取消订阅避免重复执行
        routeSub.unsubscribe();
      }
    });
  }
}

• 额外排查点
  检查项目中是否存在自定义路由守卫、全局URL拦截逻辑，这类代码如果有主动处理URL hash段的逻辑，也会导致锚点被意外清除。

内容的提问来源于stack exchange，提问作者Raphaël Balet