Angular中如何为目标URL片段设置样式？

当使用Angular的routerLink配合fragment跳转到页面片段时，原生CSS的:target伪类样式通常只会在页面刷新时短暂生效，之后便会消失。这是因为Angular的单页路由导航不会触发浏览器完全重新加载，导致:target的状态无法持续保留。下面提供两种可行的解决方法：

方法一：通过Router事件手动添加样式类 #

1. 在组件中订阅Router的NavigationEnd事件，检测URL中的片段标识，为目标元素添加自定义样式类：

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

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

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 移除之前的高亮样式类
      document.querySelectorAll('.target-highlight').forEach(el => {
        el.classList.remove('target-highlight');
      });
      // 提取当前URL中的片段
      const fragment = this.router.url.split('#')[1];
      if (fragment) {
        const targetElement = document.getElementById(fragment);
        if (targetElement) {
          targetElement.classList.add('target-highlight');
        }
      }
    });
  }
}

2. 在组件CSS中定义高亮样式：

.target-highlight {
  outline: dashed 1px;
  /* 可按需添加更多样式，比如背景高亮 */
  background-color: rgba(255, 255, 0, 0.1);
}

方法二：自定义路由滚动行为并同步设置样式 #

修改app-routing.module.ts的路由配置，自定义滚动逻辑，在滚动到目标元素时添加样式：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // 你的路由配置项
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64], // 根据页面导航栏高度调整偏移量
    scrollBehavior: (router) => {
      if (router.fragment) {
        const element = document.getElementById(router.fragment);
        if (element) {
          // 添加高亮样式
          element.classList.add('target-highlight');
          // 可选：一段时间后自动移除样式
          setTimeout(() => {
            element.classList.remove('target-highlight');
          }, 3000);
          return new Promise(resolve => {
            setTimeout(() => {
              resolve({ top: element.offsetTop });
            }, 0);
          });
        }
      }
      return Promise.resolve({ top: 0 });
    }
  })],
  exports: [RouterModule]
})
export class AppRoutingModule {}

同样在全局或组件CSS中定义target-highlight样式即可生效。

核心原因说明 #

原生:target失效的本质是Angular的单页路由机制：路由导航时浏览器不会重新解析整个页面，因此:target的触发状态无法持续；而页面刷新时浏览器会重新处理URL中的片段标识，所以样式会短暂显示。上述方法通过手动控制DOM类的方式，实现了更可靠的持久化高亮效果。

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