Nebular菜单点击触发页面组件刷新、侧边栏滚动到顶部问题

• 核心原因是你动态生成菜单时每次都创建了新的数组实例，Nebular菜单组件以数组引用作为变更检测依据，引用变更会触发菜单整体重绘，进而丢失展开状态、滚动位置重置，甚至触发父组件重新执行生命周期逻辑。
• 额外可能的触发点：菜单赋值逻辑放在了高频执行的生命周期钩子（如ngAfterViewChecked、ngOnChanges）或路由事件回调中，每次路由跳转都会重新生成菜单数组，进一步放大了重绘问题。

1. 固定菜单数组引用，仅更新动态属性
   不要每次重新赋值完整的数组结构，先初始化固定的菜单结构，仅在权限加载完成后修改对应的hidden属性，保证数组引用不变：

// pages.component.ts
menu: NbMenuItem[] = [
  {
    title: "Menu1",
    icon: "nb-person",
    children: [
      {
        title: "SubMenu1",
        link: "/pages/forms/Sub-Menu1"
      },
      {
        title: "SubMenu2",
        link: "/pages/forms/Sub-Menu2"
      }
    ],
    hidden: false
  }
]

ngOnInit() {
  // 仅更新单个属性，不修改数组本身引用
  this.menu[0].hidden = !this.available_groups.some(v => ['Admin'].includes(v))
}

2. 自定义菜单变更检测逻辑
   如果确实需要整体替换菜单结构（比如权限差异极大，菜单结构完全不同），可以给nb-menu组件传入自定义trackBy函数，避免整体重绘：
   首先在组件中定义trackBy逻辑：

trackByMenuItem(index: number, item: NbMenuItem): string {
  // 用菜单项的唯一标识（如link、id）作为跟踪依据
  return item.link || `${item.title}_${index}`;
}

然后在模板中绑定到nb-menu组件：

<nb-menu [items]="menu" [trackBy]="trackByMenuItem"></nb-menu>

3. 排查组件重载的额外触发点

• 检查路由配置中pages父路由是否配置了runGuardsAndResolvers: 'always'等会触发组件重载的参数
• 检查菜单组件或pages组件的父容器是否使用了*ngIf等条件渲染逻辑，条件变更会导致组件销毁重建
• 不要把菜单赋值逻辑放在ngAfterViewChecked、ngDoCheck等高频执行的生命周期钩子中，仅在权限信息加载完成时赋值一次

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