Angular中基于配置动态生成多级菜单组件

<!-- src/app/components/menu/menu.component.html -->
<ul class="flex flex-col pl-0 mb-0 list-none">
  <!-- 遍历当前层级的菜单项 -->
  <li
    *ngFor="let item of data"
    class="w-full"
    [ngClass]="{ 'mt-0.5 ': level === 0 }"
  >
    <!-- 菜单项链接 -->
    <a
      [attr.active_primary]="item.link === 'your logic'"
      [attr.active_page]="item.link === 'your logic'"
      [attr.collapse_trigger]="collapseTrigger"
      href="{{item.link}}"
      class="ease-in-out text-sm leading-default py-2.7 my-0 mx-2 flex items-center whitespace-nowrap px-4 font-medium text-slate-500 shadow-none rounded-lg bg-blue-500/30 px-4 font-semibold text-slate-700 transition-colors dark:text-white dark:opacity-80"
    >
      <div
        class="stroke-none flex h-6 w-8 items-center justify-center rounded-lg bg-center fill-current p-2.5 text-center text-black"
      >
        <!-- 动态绑定图标类名 -->
        <i
          class="text-sm leading-normal ni ni-tv-2 text-slate-700/80 dark:text-white"
          [ngClass]="item.icon"
        ></i>
      </div>
      <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">{{
        item.title
      }}</span>
    </a>

    <!-- 如果菜单项有子页面，则递归调用自身 -->
    <div
      *ngIf="item.subpages && item.subpages.length > 0"
      class="h-auto overflow-hidden transition-all duration-200 ease-in-out max-h-0"
      id="forms"
    >
      <!-- 递归调用 MenuComponent，传入子菜单数据并将层级加1 -->
      <app-menu [data]="item.subpages" [level]="level + 1"></app-menu>
    </div>
  </li>
</ul>

关键点解析：

• *`ngFor="let item of data"**: 遍历传入的data数组，为每个MenuItem创建一个
• ` 元素。
• [ngClass]="{ 'mt-0.5 ': level === 0 }": 根据 level 属性动态添加CSS类，这允许您为不同层级的菜单项应用不同的样式。
• [attr.active_primary]="item.link === 'your logic'": 这是一个占位符，您需要替换 'your logic' 为实际的逻辑来判断当前菜单项是否处于激活状态（例如，与当前路由匹配）。
• [ngClass]="item.icon": 动态绑定图标类名，使图标根据配置显示。
• *`ngIf="item.subpages && item.subpages.length > 0"**: 这是一个条件渲染，只有当当前菜单项包含子菜单时，才会渲染包裹子菜单的
  ` 元素。
• : 这就是递归调用的核心。当存在子菜单时，我们再次实例化 app-menu 组件，将当前菜单项的 subpages 作为新的 data 传入，并将 level 增加1，以表示进入了更深的层级。

3. 在主应用中实例化菜单

最后，在您的主应用组件（例如 AppComponent 或布局组件）的模板中，实例化 app-menu 组件并传入您的顶级菜单配置。

// src/app/app.component.ts
import { Component } from '@angular/core';
import { EmployeeLayoutSidebar } from './configs/employee-layout-sidebar.config'; // 导入菜单配置

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  menuData = EmployeeLayoutSidebar; // 将配置赋值给组件属性
}

登录后复制

<!-- src/app/app.component.html -->
<nav>
  <!-- 实例化顶级菜单组件 -->
  <app-menu [data]="menuData"></app-menu>
</nav>

登录后复制

请确保将 MenuComponent 声明在您的 AppModule 或相应的模块中。

注意事项与扩展

• 激活状态逻辑: 示例中的 item.link === 'your logic' 只是一个占位符。在实际应用中，您需要实现一套逻辑来判断哪个菜单项应该被标记为“激活”。这通常涉及检查当前路由URL与菜单项的 link 属性是否匹配。您可以在 MenuComponent 内部或通过服务来管理激活状态。
• 样式定制: 提供的HTML片段包含大量Tailwind CSS类。您可以根据您的项目设计系统和CSS框架来调整这些类。level 输入属性非常有用，允许您根据菜单的深度应用不同的样式（例如，缩进、字体大小、背景色等）。
• 动画与交互: 原始HTML中包含了一些 transition 和 ease-in-out 类，表明有动画效果。对于子菜单的展开/折叠，您可能需要结合Angular的动画模块或使用CSS来实现更平滑的过渡。collapseTrigger 属性可以用于触发这些交互。
• 可访问性 (Accessibility): 对于导航菜单，确保其具有良好的可访问性非常重要。考虑添加ARIA属性（如 aria-expanded, aria-controls, role="button" 等），以提升屏幕阅读器用户的体验。
• 性能: 对于非常深的嵌套菜单，虽然Angular的变更检测机制很高效，但极端的递归深度可能会影响性能。然而，对于大多数常见的导航菜单，这种递归组件模式是完全可接受且高效的。

总结

通过采用递归组件模式，我们能够以一种声明式、模块化且高度可复用的方式，根据任意深度的配置数据动态生成Angular中的多级菜单。这种方法不仅简化了代码结构，还大大提高了组件的灵活性和可维护性，是处理分层UI结构时的强大工具。只需定义好数据接口，创建单个组件，并利用Angular的强大功能，即可构建出满足各种复杂需求的导航系统。