Angular项目：页面刷新后如何保留菜单状态？求助

页面刷新时Angular组件会完全重新初始化，你定义的selectedItem、showElement、showMenu等状态变量都会回到初始值；同时当前代码在菜单加载完成后默认强制选中第一个主菜单，没有根据当前激活的路由匹配对应菜单，所以刷新后状态被重置。

推荐采用路由驱动菜单状态的方案（和Binance的实现逻辑一致），让菜单状态与当前路由完全同步，既能解决刷新状态丢失问题，也支持直接访问子路由时自动激活对应菜单。

步骤1：规范路由绑定（模板修改） #

将子菜单的routerLink绑定改为Angular推荐的属性绑定方式，避免字符串插值可能的问题：

<li class="items" [ngClass]="{ active: subItem.active }" [routerLink]="subItem.state" *ngFor="let subItem of subMenu">
  <span>{{subItem.name}}</span>
</li>

步骤2：添加路由匹配菜单的逻辑（组件修改） #

在组件中新增根据当前路由激活对应菜单的方法，并在菜单数据加载完成后执行：

// 根据当前路由激活对应的主菜单和子菜单
activateMenuFromRoute() {
  const currentUrl = this.router.url;
  let targetMainItem: IMenuItem | undefined;

  // 遍历主菜单，找到包含当前子路由的父菜单
  this.nav.forEach(mainItem => {
    if (mainItem.sub?.some(subItem => currentUrl.includes(subItem.state))) {
      targetMainItem = mainItem;
    }
  });

  if (targetMainItem) {
    // 激活匹配到的主菜单
    this.setActiveMainItem(targetMainItem);
    // 标记对应子菜单为激活状态（需要给IChildItem接口添加active属性）
    targetMainItem.sub?.forEach(subItem => {
      subItem.active = currentUrl.includes(subItem.state);
    });
  } else {
    // 无匹配路由时默认选中第一个主菜单
    if (this.nav.length > 0) {
      this.setActiveMainItem(this.nav[0]);
    }
  }
}

步骤3：修改菜单初始化逻辑 #

更新navBarData中的菜单订阅逻辑，移除默认选中第一个菜单的硬编码，改为调用路由匹配方法：

navBarData(): void {
  this.updateSidebar();

  this.router.events
    .pipe(filter((event) => event instanceof NavigationEnd))
    .subscribe((routeChange) => {
      if (Utils.isMobile()) {
        this.showSideBar = false;
      }
      // 路由变化时重新激活菜单
      this.activateMenuFromRoute();
    });

  if (this.navService.menuItems$) {
    this.navService.menuItems$.subscribe((items) => {
      this.nav = items;
      // 初始化所有菜单为非激活状态
      this.nav.forEach((item) => {
        item.active = false;
        item.sub?.forEach(sub => sub.active = false);
      });
      // 菜单加载完成后根据路由激活对应项
      this.activateMenuFromRoute();
    });
  }
}

步骤4：修正状态设置逻辑 #

修改setActiveMainItem方法，去掉toggle逻辑（刷新时需要直接设置正确状态，而非切换）：

setActiveMainItem(item) {
  this.nav.forEach((i) => {
    i.active = i === item;
    // 重置其他主菜单的子菜单激活状态
    i.sub?.forEach(sub => sub.active = false);
  });
  // 直接设置显示状态，而非切换
  this.showElement = true;
  this.showMenu = false;
  this.subMenu = item.sub;
  this.selectedItem = item;
}

备选方案：本地存储保存状态 #

如果不需要和路由绑定，也可以用localStorage/sessionStorage保存菜单状态，刷新时读取恢复：

// 点击主菜单时保存状态
setActiveMainItem(item) {
  // ...原有逻辑
  localStorage.setItem('activeMainMenu', JSON.stringify({ name: item.name }));
}

// 点击子菜单时添加保存逻辑（需给子菜单绑定点击事件）
onSubMenuClick(subItem) {
  localStorage.setItem('activeSubMenu', JSON.stringify({ name: subItem.name }));
}

// 初始化时读取存储的状态
activateMenuFromStorage() {
  const savedMain = localStorage.getItem('activeMainMenu');
  if (savedMain && this.nav.length > 0) {
    const mainData = JSON.parse(savedMain);
    const targetMain = this.nav.find(item => item.name === mainData.name);
    if (targetMain) {
      this.setActiveMainItem(targetMain);
      const savedSub = localStorage.getItem('activeSubMenu');
      if (savedSub && targetMain.sub) {
        const subData = JSON.parse(savedSub);
        targetMain.sub.find(sub => sub.name === subData.name)!.active = true;
      }
    }
  }
}

在navBarData的菜单订阅中调用activateMenuFromStorage()即可。

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