Angular 17 + Nebular菜单：页面加载/刷新时如何选中菜单项？

解决方案思路 #

Nebular的NbMenu组件没有提供直接通过服务触发选中的API，但可以通过获取菜单组件实例结合路由匹配实现页面加载/刷新时自动激活对应菜单项。核心逻辑是：监听路由变化，找到与当前路由匹配的菜单项，调用菜单组件的实例方法完成选中。

具体实现步骤 #

1. 导入依赖并获取菜单组件实例
   在侧边栏组件中，导入NbMenuComponent和Router，通过ViewChild获取菜单组件的实例。

2. 编写路由匹配逻辑
   递归遍历菜单数据，找到与当前路由匹配的菜单项（支持多级子菜单），同时处理父菜单的展开逻辑。

3. 初始化与路由监听
   组件初始化时触发一次匹配，同时监听路由变化，确保路由切换时菜单项同步更新。

完整代码示例 #

组件代码（sidebar.component.ts）

import { Component, ViewChild, OnInit } from '@angular/core';
import { NbMenuComponent } from '@nebular/theme';
import { Router } from '@angular/router';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
})
export class SidebarComponent implements OnInit {
  @ViewChild(NbMenuComponent) private menuComponent!: NbMenuComponent;

  // 菜单数据，确保link与路由配置一致
  menuItems = [
    { title: '首页', link: '/home' },
    { title: '用户管理', link: '/users' },
    {
      title: '系统设置',
      children: [
        { title: '权限配置', link: '/settings/permissions' },
        { title: '参数设置', link: '/settings/params' },
      ],
    },
  ];

  constructor(private router: Router) {}

  ngOnInit(): void {
    // 页面加载时设置激活项
    this.activateMatchedMenuItem();
    // 监听路由变化，同步更新菜单项
    this.router.events.subscribe(() => {
      this.activateMatchedMenuItem();
    });
  }

  private activateMatchedMenuItem(): void {
    const currentUrl = this.router.url;
    const matchedItem = this.findMatchedItem(this.menuItems, currentUrl);

    if (matchedItem && this.menuComponent) {
      // 调用菜单组件的selectItem方法激活菜单项
      this.menuComponent.selectItem(matchedItem);
    }
  }

  private findMatchedItem(items: any[], currentUrl: string): any | null {
    for (const item of items) {
      // 使用router.isActive精确匹配路由，避免部分路径匹配错误
      if (item.link && this.router.isActive(item.link, true)) {
        return item;
      }

      // 递归查找子菜单
      if (item.children?.length) {
        const matchedChild = this.findMatchedItem(item.children, currentUrl);
        if (matchedChild) {
          // 展开父菜单
          item.expanded = true;
          return matchedChild;
        }
      }
    }
    return null;
  }
}

模板代码（sidebar.component.html）

<nb-menu [items]="menuItems"></nb-menu>

注意事项 #

• 确保菜单数据中的link字段与路由配置完全一致，router.isActive的第二个参数设为true会进行精确匹配，若需要模糊匹配可改为false。
• 如果菜单项使用route（而非link）配置路由，只需把匹配逻辑中的item.link替换为item.route即可。
• 若菜单数据是异步加载的（比如从接口获取），需要在数据加载完成后再调用activateMatchedMenuItem()方法。

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