Angular 13如何实现URL路由变化时自动关闭滚动下拉菜单

问题根因 #

原有代码仅实现了点击头像切换菜单开合状态的逻辑，未对路由事件做监听，URL变更时控制菜单状态的open变量不会被自动重置为false，因此菜单会保持打开状态。

具体实现 #

1. 修改组件TS逻辑 #

在组件初始化阶段订阅路由事件，当检测到导航启动事件时，直接将菜单状态重置为关闭，同时在组件销毁时取消订阅避免内存泄漏。
修改后的header.component.ts代码如下：

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationStart } from '@angular/router';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html'
})
export class HeaderComponent implements OnInit, OnDestroy {
  open: boolean = false;
  // 存储路由事件订阅实例
  private routerEventSub: Subscription;

  constructor(private route: ActivatedRoute, private router: Router) {}

  ngOnInit(): void {
    this.routerEventSub = this.router.events.subscribe(event => {
      // 监听到导航开始动作时，关闭下拉菜单
      if (event instanceof NavigationStart) {
        this.open = false;
      }
    })
  }

  openMenu() {
    // 简化开合切换逻辑
    this.open = !this.open;
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，防止内存泄漏
    this.routerEventSub?.unsubscribe();
  }
}

2. 模板代码调整 #

原有HTML的状态绑定逻辑可直接复用，无需额外修改。

优化说明 #

• 移除了原有代码中未使用的click、currentUrl冗余变量
• 简化了openMenu方法的开合判断逻辑，代码更简洁
• 该方案覆盖所有路由跳转场景：无论是点击routerLink跳转，还是代码中调用router.navigate跳转，都能自动触发菜单关闭

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