Angular中如何为激活的页内锚点链接添加CSS类？

我之前也碰到过类似的需求，确实routerLinkActive是为路由页面跳转设计的，不太适配原生锚点的页内导航场景。这里给你两个实用的实现方案：

方案一：点击事件手动切换Active类 #

这个方案逻辑简单，适合只需要点击链接时高亮的场景：

1. 组件TS代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-page-nav',
  templateUrl: './page-nav.component.html',
  styleUrls: ['./page-nav.component.css']
})
export class PageNavComponent {
  page1_Id = 'page1';
  page2_Id = 'page2';
  page3_Id = 'page3';
  activePageId = this.page1_Id; // 默认高亮第一个页面

  // 点击导航链接时触发
  onNavClick(pageId: string) {
    this.activePageId = pageId;
    // 滚动到对应区域
    const targetElement = document.getElementById(pageId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

2. 模板代码 #

修改导航链接，绑定类状态和点击事件：

<body>
  <!-- Header -->
  <div class="header">
    <a 
      [href]="'#' + page1_Id" 
      [class.active]="activePageId === page1_Id"
      (click)="onNavClick(page1_Id)"
    >Page1</a>
    <a 
      [href]="'#' + page2_Id" 
      [class.active]="activePageId === page2_Id"
      (click)="onNavClick(page2_Id)"
    >Page2</a>
    <a 
      [href]="'#' + page3_Id" 
      [class.active]="activePageId === page3_Id"
      (click)="onNavClick(page3_Id)"
    >Page3</a>
  </div>

  <!-- Page1 -->
  <div [id]="page1_Id"> I'm Page 1 </div>
  <!-- Page2 -->
  <div [id]="page2_Id"> I'm Page 2 </div>
  <!-- Page3 -->
  <div [id]="page3_Id"> I'm Page 3 </div>
</body>

3. CSS样式 #

添加active类的高亮样式：

.header a.active {
  color: #165DFF;
  font-weight: bold;
  border-bottom: 2px solid #165DFF;
}

方案二：监听滚动自动更新Active类 #

如果希望滚动页面时，自动高亮当前视口内的页面，这个方案体验更流畅：

1. 组件TS代码 #

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-page-nav',
  templateUrl: './page-nav.component.html',
  styleUrls: ['./page-nav.component.css']
})
export class PageNavComponent {
  page1_Id = 'page1';
  page2_Id = 'page2';
  page3_Id = 'page3';
  activePageId = this.page1_Id;

  // 监听窗口滚动事件
  @HostListener('window:scroll', [])
  onWindowScroll() {
    const sections = [
      { id: this.page1_Id, element: document.getElementById(this.page1_Id) },
      { id: this.page2_Id, element: document.getElementById(this.page2_Id) },
      { id: this.page3_Id, element: document.getElementById(this.page3_Id) }
    ];

    // 遍历所有section，判断哪个处于视口范围内
    for (const section of sections) {
      if (section.element) {
        const rect = section.element.getBoundingClientRect();
        // 当section顶部进入视口、底部未完全离开时，标记为active
        if (rect.top <= 100 && rect.bottom >= 100) {
          this.activePageId = section.id;
          break;
        }
      }
    }
  }

  // 点击导航链接时滚动到对应区域
  onNavClick(pageId: string) {
    const targetElement = document.getElementById(pageId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  }
}

2. 模板代码 #

和方案一的模板完全一致，滚动监听会自动更新active状态。

小提示 #

• 如果想更贴合Angular的最佳实践，可以把document.getElementById替换成Renderer2.selectRootElement来操作DOM。
• scrollIntoView里的behavior: 'smooth'是平滑滚动效果，不需要的话可以直接移除。

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