Angular递归组件实现动态导航菜单：基于配置高效构建复杂UI

// src/app/interfaces/menu-item.interface.ts
export interface MenuItem {
  title: string; // 菜单项标题
  icon?: string; // 菜单项图标
  link: string;  // 菜单项链接
  subpages?: MenuItem[]; // 子菜单项，递归引用自身
}

// src/app/configs/employee-layout-sidebar.config.ts
import { MenuItem } from '../interfaces/menu-item.interface';

export const EmployeeLayoutSidebar: MenuItem[] = [
  {
    title: 'Startseite',
    icon: 'ni ni-tv-2',
    link: '#'
  },
  {
    title: 'Rechnungstool',
    icon: 'fas fa-money-bill-wave',
    link: '#',
  },
  {
    title: 'Formulare',
    icon: 'fas fa-file-alt',
    link: '#',
    subpages: [
      {
        title: 'Bewertungen',
        icon: 'caret',
        link: '#',
        subpages: [
          {
            title: 'Azubi',
            // icoon: '', // 注意：原始数据中拼写错误，应修正为 icon
            link: '#',
          }
        ],
      },
      {
        title: 'Bewerbung',
        icon: '',
        link: '#',
      }
    ],
  }
];

// src/app/components/menu/menu.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { MenuItem } from '../../interfaces/menu-item.interface';

@Component({
  selector: 'app-menu', // 组件选择器
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.css'],
})
export class MenuComponent implements OnInit {
  @Input()
  level = 0; // 当前菜单层级，默认为0 (顶层)

  @Input()
  data!: MenuItem[]; // 当前层级的菜单数据

  collapseTrigger: string | undefined; // 用于控制折叠/展开的触发器属性

  ngOnInit(): void {
    // 根据菜单层级设置不同的行为或样式，例如折叠触发器
    switch (this.level) {
      case 0:
        this.collapseTrigger = 'primary'; // 顶层菜单使用 'primary' 触发器
        break;
      case 1:
        this.collapseTrigger = 'secondary'; // 第二层菜单使用 'secondary' 触发器
        break;
      // 可以根据需要添加更多层级的逻辑
    }
  }
}

<!-- 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_current_route_logic_for_primary'"
      [attr.active_page]="item.link === 'your_current_route_logic_for_page'"
      [attr.collapse_trigger]="item.subpages && item.subpages.length > 0 ? collapseTrigger : null"
      [href]="item.link !== '#' ? item.link : 'javascript:;'"
      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"
      >
        <!-- 根据 item.icon 动态显示图标 -->
        <i
          class="text-sm leading-normal {{ item.icon }} text-slate-700/80 dark:text-white"
        ></i>
      </div>
      <span class="ml-1 duration-300 opacity-100 pointer-events-none ease">{{
        item.title
      }}</span>
      <!-- 如果有子菜单，可以添加一个指示符，例如箭头 -->
      <span *ngIf="item.subpages && item.subpages.length > 0" class="ml-auto after:ease-in-out after:font-awesome-5-free after:inline-block after:font-bold after:text-slate-800/50 after:antialiased after:transition-all after:duration-200 after:content-['\f107'] dark:after:text-white/50 dark:after:text-white"></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-' + item.title.toLowerCase().replace(/\s/g, '-')" <!-- 动态ID，确保唯一性 -->
    >
      <!-- 嵌套的app-menu组件将渲染子菜单，层级加1 -->
      <app-menu [data]="item.subpages" [level]="level + 1"></app-menu>
    </div>
  </li>
</ul>

<!-- src/app/app.component.html (或你的布局组件) -->
<nav>
  <app-menu [data]="EmployeeLayoutSidebar"></app-menu>
</nav>

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MenuComponent } from './components/menu/menu.component'; // 导入 MenuComponent

@NgModule({
  declarations: [
    AppComponent,
    MenuComponent // 声明 MenuComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

// src/app/app.component.ts
import { Component } from '@angular/core';
import { EmployeeLayoutSidebar } from './configs/employee-layout-sidebar.config'; // 导入配置数据
import { MenuItem } from './interfaces/menu-item.interface';

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

<!-- src/app/app.component.html -->
<nav>
  <app-menu [data]="menuData"></app-menu>
</nav>

/* src/app/components/menu/menu.component.css */
/* 示例：根据层级调整左边距 */
ul {
  padding-left: 0; /* 默认无左边距 */
}

/* 针对子菜单的ul添加左边距，以实现缩进效果 */
app-menu > ul { /* 这是一个示例选择器，可能需要根据实际DOM结构调整 */
  margin-left: 1.5rem; /* 例如，每个子菜单缩进 1.5rem */
}

/* 更精细的控制可以通过在组件内部根据 level 动态添加类 */
/* .level-0-item { /* 顶层菜单项样式 */ }
/* .level-1-item { /* 第二层菜单项样式 */ } */