Angular嵌套菜单：如何正确获取点击菜单项的level、title和Id？

在Angular中实现嵌套菜单时，通常你会使用递归组件来处理不同层级的菜单项。为了正确获取点击菜单项的level、title和Id，你可以通过以下步骤来实现：

1. 定义菜单项的数据结构

首先，定义一个菜单项的数据结构，通常是一个包含id、title、children等属性的对象。

interface MenuItem {
  id: number;
  title: string;
  level: number;
  children?: MenuItem[];
}

2. 创建递归组件

创建一个递归组件来渲染嵌套菜单。这个组件会接收一个菜单项数组作为输入，并递归地渲染每个菜单项及其子菜单。

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-nested-menu',
  template: `
    <ul>
      <li *ngFor="let item of menuItems" (click)="onItemClick(item)">
        {{ item.title }}
        <app-nested-menu *ngIf="item.children" [menuItems]="item.children"></app-nested-menu>
      </li>
    </ul>
  `
})
export class NestedMenuComponent {
  @Input() menuItems: MenuItem[];
  @Output() itemClick = new EventEmitter<MenuItem>();

  onItemClick(item: MenuItem) {
    this.itemClick.emit(item);
  }
}

3. 在父组件中使用递归组件

在父组件中使用这个递归组件，并处理菜单项的点击事件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-nested-menu [menuItems]="menuItems" (itemClick)="onMenuItemClick($event)"></app-nested-menu>
  `
})
export class AppComponent {
  menuItems: MenuItem[] = [
    {
      id: 1,
      title: 'Menu 1',
      level: 1,
      children: [
        {
          id: 2,
          title: 'Submenu 1.1',
          level: 2,
          children: [
            { id: 3, title: 'Submenu 1.1.1', level: 3 }
          ]
        },
        { id: 4, title: 'Submenu 1.2', level: 2 }
      ]
    },
    {
      id: 5,
      title: 'Menu 2',
      level: 1
    }
  ];

  onMenuItemClick(item: MenuItem) {
    console.log('Clicked Item:', item);
    console.log('Level:', item.level);
    console.log('Title:', item.title);
    console.log('ID:', item.id);
  }
}

4. 处理点击事件

在onMenuItemClick方法中，你可以获取到点击的菜单项的level、title和id，并根据需要进行处理。

5. 运行应用

运行你的Angular应用，点击菜单项时，你应该能够在控制台中看到相应的level、title和id信息。

总结

通过使用递归组件和事件传递，你可以轻松地在Angular中实现嵌套菜单，并获取点击菜单项的level、title和id。这种方法不仅适用于简单的嵌套菜单，还可以扩展到更复杂的场景。