如何根据当前routerLink控制头部样式：首页滚动变色，其他页面固定深色

现有代码 #

导航菜单HTML #

<header class="box-one"  >  
  <nav>
    <ul class="menu-horizontal">
      <li><a  routerLinkActive="active" routerLink="/init">init</a></li>
      <li><a  routerLinkActive="active" routerLink="plataform">Plataforms</a></li>
      <li><a  routerLinkActive="active"  routerLink="About us">About us</a></li>
      <li><a  routerLinkActive="active"  routerLink="contact">Contact</a></li>
    </ul>
  </nav>
</header>

滚动切换样式函数 #

funScroll() {
  var header = document.querySelector(".box-one")
  window.addEventListener("scroll", function () {
    header!.classList.toggle("arriba", window.scrollY < 800);
    header!.classList.toggle("abajo", window.scrollY > 500);
  })
}

存在问题的路由监听代码 #

private router = inject(Router)  
constructor() {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      console.log(event.url); // 当前路由
      this.currentRoute = event.url;
      if (event.url === "/inicio") {
        this.funScroll()
      } else {
      }
      if (event.url === "/plataforma") {
        var header = document.querySelector(".box-one");
        header!.classList.add('abajo');
      }
    }
  });
}

问题根源 #

1. 路由判断错误：首页路由是/init，代码里却判断/inicio，导致首页无法触发滚动逻辑
2. 滚动事件重复绑定：每次切回首页都会新增一个scroll监听，事件叠加后会导致样式切换异常
3. 非首页处理不完整：仅给/plataforma页面添加深色类，其他页面未处理，且未清除首页可能残留的arriba类和滚动监听

修复后的代码 #

private router = inject(Router);
private scrollListener?: () => void;

constructor() {
  this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      const header = document.querySelector(".box-one");
      if (!header) return;

      // 先移除之前的滚动监听，避免重复绑定
      if (this.scrollListener) {
        window.removeEventListener("scroll", this.scrollListener);
        this.scrollListener = undefined;
      }

      // 重置头部所有相关样式类
      header.classList.remove('arriba', 'abajo');

      if (event.url === "/init") {
        // 绑定滚动事件并保存引用，方便后续移除
        this.scrollListener = () => {
          header.classList.toggle("arriba", window.scrollY < 800);
          header.classList.toggle("abajo", window.scrollY > 500);
        };
        window.addEventListener("scroll", this.scrollListener);
        // 初始化首页当前滚动位置对应的样式
        header.classList.toggle("arriba", window.scrollY < 800);
        header.classList.toggle("abajo", window.scrollY > 500);
      } else {
        // 所有非首页页面固定添加深色类
        header.classList.add('abajo');
      }
    }
  });
}

// 组件销毁时清理监听，防止内存泄漏
ngOnDestroy() {
  if (this.scrollListener) {
    window.removeEventListener("scroll", this.scrollListener);
  }
}

额外优化建议 #

尽量避免直接操作DOM，改用Angular的@ViewChild获取元素，更符合框架最佳实践：

1. 模板中给header添加标记：

<header #header class="box-one">
  <!-- 导航内容 -->
</header>

2. 组件中获取元素：

@ViewChild('header') header!: ElementRef<HTMLElement>;

之后用this.header.nativeElement代替document.querySelector(".box-one")即可。

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