Angular嵌套菜单中如何准确获取用户点击项的level、title和Id信息？

在Angular中，如果你有一个嵌套菜单，并且想要准确获取用户点击项的 level、title 和 Id 信息，你可以通过以下步骤实现：

1. 定义菜单数据结构

首先，你需要定义一个嵌套的菜单数据结构。通常，这可以是一个包含 id、title、level 和 children 属性的对象数组。

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

const menuItems: MenuItem[] = [
  {
    id: 1,
    title: 'Item 1',
    level: 1,
    children: [
      {
        id: 2,
        title: 'Sub Item 1',
        level: 2,
        children: [
          {
            id: 3,
            title: 'Sub Sub Item 1',
            level: 3,
          },
        ],
      },
    ],
  },
  {
    id: 4,
    title: 'Item 2',
    level: 1,
  },
];

2. 渲染嵌套菜单

使用 Angular 的模板语法来递归渲染嵌套菜单。

<ul>
  <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: menuItems }"></ng-container>
</ul>

<ng-template #menuTemplate let-items>
  <li *ngFor="let item of items">
    <a (click)="onItemClick(item)">{{ item.title }}</a>
    <ul *ngIf="item.children">
      <ng-container *ngTemplateOutlet="menuTemplate; context: { $implicit: item.children }"></ng-container>
    </ul>
  </li>
</ng-template>

3. 处理点击事件

在组件中定义一个 onItemClick 方法来处理菜单项的点击事件，并获取 level、title 和 id 信息。

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

@Component({
  selector: 'app-nested-menu',
  templateUrl: './nested-menu.component.html',
  styleUrls: ['./nested-menu.component.css'],
})
export class NestedMenuComponent {
  menuItems: MenuItem[] = [
    {
      id: 1,
      title: 'Item 1',
      level: 1,
      children: [
        {
          id: 2,
          title: 'Sub Item 1',
          level: 2,
          children: [
            {
              id: 3,
              title: 'Sub Sub Item 1',
              level: 3,
            },
          ],
        },
      ],
    },
    {
      id: 4,
      title: 'Item 2',
      level: 1,
    },
  ];

  onItemClick(item: MenuItem): void {
    console.log('Clicked Item:', {
      id: item.id,
      title: item.title,
      level: item.level,
    });
  }
}

4. 运行效果

当用户点击菜单项时，onItemClick 方法会被触发，并且会在控制台中输出点击项的 id、title 和 level 信息。

总结

通过以上步骤，你可以在 Angular 中实现一个嵌套菜单，并准确获取用户点击项的 level、title 和 Id 信息。关键在于使用递归模板来渲染嵌套菜单，并在点击事件中传递当前菜单项的数据。