Angular项目中如何准确获取Ant Design菜单点击项的level、title和Id信息？

在Angular项目中使用Ant Design的菜单组件时，可以通过监听菜单项的点击事件来获取点击项的level、title和id信息。Ant Design的菜单组件提供了nz-menu和nz-menu-item等组件，并且可以通过(nzClick)事件来监听菜单项的点击。

以下是一个示例，展示如何在Angular项目中获取Ant Design菜单点击项的level、title和id信息：

1. 安装Ant Design Angular

首先，确保你已经安装了Ant Design Angular库。如果还没有安装，可以使用以下命令进行安装：

npm install ng-zorro-antd --save

2. 在组件中使用Ant Design菜单

在你的Angular组件中，使用nz-menu和nz-menu-item组件来创建菜单，并通过(nzClick)事件监听菜单项的点击。

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

@Component({
  selector: 'app-menu',
  template: `
    <nz-menu [nzMode]="'inline'" (nzClick)="onMenuClick($event)">
      <nz-submenu nzTitle="Submenu 1" nzIcon="mail">
        <ul nz-menu>
          <li nz-menu-item nzTitle="Item 1" nzId="1">Item 1</li>
          <li nz-menu-item nzTitle="Item 2" nzId="2">Item 2</li>
        </ul>
      </nz-submenu>
      <nz-submenu nzTitle="Submenu 2" nzIcon="appstore">
        <ul nz-menu>
          <li nz-menu-item nzTitle="Item 3" nzId="3">Item 3</li>
          <li nz-menu-item nzTitle="Item 4" nzId="4">Item 4</li>
        </ul>
      </nz-submenu>
    </nz-menu>
  `
})
export class MenuComponent {
  onMenuClick(event: any): void {
    const { key, domEvent } = event;
    const { target } = domEvent;

    // 获取点击项的 level, title 和 id
    const level = target.getAttribute('data-level');
    const title = target.getAttribute('title');
    const id = target.getAttribute('data-id');

    console.log('Level:', level);
    console.log('Title:', title);
    console.log('ID:', id);
  }
}

3. 添加自定义属性

为了获取level、title和id信息，你可以在nz-menu-item上添加自定义属性。例如：

<li nz-menu-item nzTitle="Item 1" nzId="1" data-level="1" data-id="1">Item 1</li>
<li nz-menu-item nzTitle="Item 2" nzId="2" data-level="1" data-id="2">Item 2</li>

4. 在点击事件中获取信息

在onMenuClick方法中，你可以通过event对象获取点击项的level、title和id信息。event对象包含了key、domEvent等属性，domEvent是原生的DOM事件对象，可以通过它来获取点击项的DOM元素。

onMenuClick(event: any): void {
  const { key, domEvent } = event;
  const { target } = domEvent;

  // 获取点击项的 level, title 和 id
  const level = target.getAttribute('data-level');
  const title = target.getAttribute('title');
  const id = target.getAttribute('data-id');

  console.log('Level:', level);
  console.log('Title:', title);
  console.log('ID:', id);
}

5. 运行项目

运行你的Angular项目，点击菜单项时，你可以在控制台中看到输出的level、title和id信息。

总结

通过监听Ant Design菜单的点击事件，并在菜单项上添加自定义属性，你可以轻松获取点击项的level、title和id信息。这种方法适用于大多数场景，并且可以根据需要进行扩展和定制。