CoreUI Angular 侧边栏使用动态JSON渲染时默认全部展开问题求解

问题根因 #

对比你提供的静态JSON和服务端返回的动态JSON，两者的结构差异触发了CoreUI侧边栏的默认自动展开逻辑：

• 动态返回的父级导航项url字段为null，组件会误判该父级路由与当前根路由匹配，自动添加open类展开
• 异步加载的动态数据不会触发组件的默认字段补全逻辑，没有自动给有子项的父级添加open: false的初始值，而静态JSON在编译阶段就完成了默认值初始化

最优解决方案 #

按优先级从高到低选择即可：

1. 优先方案：转换动态数据补全必填字段
   拿到服务端返回的导航数据后，先做一次结构转换，显式指定初始状态，避免组件误判：

// 服务端请求返回数据后执行转换
this.navItems = serverNavData.map(item => {
  // 处理有子导航的父级项
  if (item.children?.length) {
    // 显式指定默认不展开
    item.open = false;
    // 父级url为null时补占位值，避免匹配根路由
    if (!item.url) {
      item.url = `/${item.name.toLowerCase().replace(/\s+/g, '-')}`;
    }
    // 若存在多级导航，可递归处理子项的父级节点
  }
  return item;
});

2. 兼容方案：关闭组件自动展开配置
   CoreUI Angular 4.x及以上版本支持直接关闭路由匹配自动展开功能，在模板中添加配置即可：

<app-sidebar #appSidebar [fixed]="true" [display]="'lg'" [minimized]="sidebarMinimized" (minimizedChange)="toggleMinimize($event)">
    <!-- 添加autoExpand=false关闭路由匹配自动展开逻辑 -->
    <app-sidebar-nav [navItems]="navItems" [autoExpand]="false" [perfectScrollbar] [disabled]="appSidebar.minimized"></app-sidebar-nav>
    <app-sidebar-minimizer></app-sidebar-minimizer>
</app-sidebar>

3. 兜底方案：手动强制收起所有导航
   如果上述方案都不生效，可调用组件内置方法手动重置导航状态：

import { ViewChild, AfterViewChecked } from '@angular/core';
import { AppSidebarNavComponent } from '@coreui/angular';

export class YourComponent implements AfterViewChecked {
  @ViewChild(AppSidebarNavComponent) sidebarNav: AppSidebarNavComponent;
  navItems = [];

  // 视图更新后执行收起操作
  ngAfterViewChecked() {
    if (this.sidebarNav && this.navItems.length) {
      // 内置方法，收起所有展开的导航项
      this.sidebarNav.hideAll();
    }
  }
}

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