Angular 2中Bootstrap导航路由问题：页面转组件时锚点导航异常

我太懂你现在的困扰了——把传统Bootstrap页面转成Angular 2组件后，原来的<a href="#header">这类锚点导航完全失效，根本跳不到目标位置对吧？这其实是Angular路由机制在“搞鬼”：它会拦截所有带href的链接，默认把#后面的内容当成路由路径解析，而不是页面内的锚点定位。下面给你几个实用的解决方案：

方案一：用Angular Router的Fragment功能（最规范） #

这是贴合Angular生态的做法，步骤很清晰：

1. 先确认你的路由配置默认已经支持锚点（Angular 2+原生自带，除非做了特殊限制）
2. 把原来的<a href="#header">替换成Angular的routerLink指令，搭配fragment属性：

<li><a routerLink="/" fragment="header">About</a></li>

这里的routerLink="/"指向当前组件的路由路径，如果导航就在根组件里，写routerLink=""也没问题。
3. 要是你的Angular版本偏旧，可能需要手动监听路由事件来触发滚动：

import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';

constructor(private router: Router) {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(() => {
    const fragment = this.router.parseUrl(this.router.url).fragment;
    if (fragment) {
      document.getElementById(fragment)?.scrollIntoView({ behavior: 'smooth' });
    }
  });
}

方案二：原生JS手动处理（适合同组件内跳转） #

如果你的导航只是在当前组件内跳转，不需要切换路由，直接用原生JS绕开Angular的拦截更简单：

1. 给链接绑定点击事件，阻止默认跳转行为：

<li><a (click)="scrollToAnchor('header')">About</a></li>

2. 在组件类里实现滚动方法，还能顺便处理固定导航栏的遮挡问题：

scrollToAnchor(anchorId: string): void {
  const targetElement = document.getElementById(anchorId);
  if (targetElement) {
    // 计算固定导航栏的高度，避免锚点内容被挡住
    const navHeight = document.querySelector('.navbar-fixed-top')?.clientHeight || 0;
    const scrollTop = targetElement.getBoundingClientRect().top + window.pageYOffset - navHeight;
    window.scrollTo({
      top: scrollTop,
      behavior: 'smooth' // 可选，开启平滑滚动
    });
  }
}

方案三：临时禁用Angular路由拦截（应急用） #

要是你想保留原来的href写法，也可以给链接加target="_self"强制浏览器按原生方式处理，但这种方式不符合Angular路由规范，只建议应急使用：

<li><a href="#header" target="_self">About</a></li>

最后提醒一句：因为你用了navbar-fixed-top固定导航栏，滚动到锚点时大概率会出现内容被导航栏挡住的情况，所以不管用哪种方案，记得加上导航栏高度的偏移量，用户体验会好很多。

内容的提问来源于stack exchange，提问作者Mr. Learner