Angular 6+中数据库渲染内容的内部锚点点击路由跳转报错问题

Angular 6+ 原生支持该场景实现，无需修改数据库存储的HTML内容，核心思路是拦截动态内容中锚点的默认跳转行为，手动触发页内滚动即可。

方案一：使用Angular内置能力实现（推荐） #

1. 开启路由模块的锚点滚动支持 #

Angular 6+ 内置了锚点滚动的能力，首先在根路由模块配置对应参数：

// app-routing.module.ts
@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      anchorScrolling: 'enabled', // 开启锚点滚动
      scrollPositionRestoration: 'enabled', // 支持滚动位置恢复
      onSameUrlNavigation: 'reload' // 同路由下锚点变更触发滚动
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

2. 动态内容渲染层拦截锚点点击 #

动态通过innerHTML插入的HTML内容不会被Angular编译器处理，因此需要通过事件委托拦截锚点点击，阻止默认跳转：

// 承载动态内容的组件
import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import { ViewportScroller } from '@angular/common';
import { Router } from '@angular/router';

@Component({
  selector: 'app-dynamic-content',
  // 动态内容绑定到容器，注意用DomSanitizer处理安全信任
  template: `<div #dynamicContainer [innerHTML]="trustedHtml"></div>`
})
export class DynamicContentComponent implements OnInit {
  @ViewChild('dynamicContainer', { static: true }) container: ElementRef;
  trustedHtml: SafeHtml;

  constructor(
    private sanitizer: DomSanitizer,
    private scroller: ViewportScroller,
    private router: Router
  ) {}

  ngOnInit() {
    // 替换为从数据库读取的原始HTML内容
    const rawDbHtml = `<a href="#id">click</a>
---------
---------
<h1 id="id">sample </h1>`;
    this.trustedHtml = this.sanitizer.bypassSecurityTrustHtml(rawDbHtml);

    // 给容器绑定点击事件委托
    this.container.nativeElement.addEventListener('click', (e: MouseEvent) => {
      const clickTarget = e.target as HTMLElement;
      const anchor = clickTarget.closest('a');
      if (!anchor) return;

      const hrefVal = anchor.getAttribute('href');
      // 匹配页内锚点：以#开头且不是#/开头的路由路径
      if (hrefVal?.startsWith('#') && !hrefVal.startsWith('#/')) {
        e.preventDefault(); // 核心：阻止浏览器默认跳转行为
        const targetId = hrefVal.slice(1);
        
        // 滚动逻辑二选一即可
        // 选项1：直接滚动，不修改地址栏hash
        this.scroller.scrollToAnchor(targetId);
        // 选项2：同步更新地址栏hash，符合常规锚点交互
        // this.router.navigate([], { fragment: targetId });
      }
    });
  }
}

方案二：原生API轻量实现 #

如果不需要引入路由的滚动配置，可以直接用原生DOM API完成滚动，逻辑更轻量：
把上述代码中的滚动逻辑替换为以下代码即可：

const targetElement = document.getElementById(targetId);
if (targetElement) {
  // 平滑滚动到目标位置
  targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
  // 可选：不刷新页面更新地址栏hash
  history.replaceState(null, '', `#${targetId}`);
}

注意事项 #

• 如果动态内容包含图片、懒加载模块等异步渲染内容，可以在滚动逻辑外包裹setTimeout(() => {/* 滚动逻辑 */}, 0)，等DOM完全渲染后再执行滚动，避免找不到目标元素
• 如果需要支持平滑滚动，可以在全局样式里添加html { scroll-behavior: smooth; }，或者在调用滚动API时传入对应配置
• 若动态内容中包含跨页面锚点（如/other-page#section），可以在事件判断逻辑中补充分支，交给Angular Router统一处理跳转即可

问题原因说明 #

通过innerHTML插入的动态HTML不会经过Angular的编译流程，其中的<a>标签不会被Angular路由接管，点击时会触发浏览器原生跳转逻辑，将#后的内容识别为hash路由路径，因此会出现路由匹配失败的错误页。上述方案通过事件委托拦截原生行为，完全不需要修改数据库存储的原始内容即可实现正常锚点定位。

内容的提问来源于stack exchange，提问作者Phanindra Kumar Pedipini