0

0

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

聖光之護

聖光之護

发布时间:2025-03-03 17:54:23

|

585人浏览过

|

来源于php中文网

原创

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

本文讲解如何在angular嵌套菜单组件中,准确获取用户点击菜单项的leveltitleid信息。 之前的代码尝试使用[nzselected]属性绑定,但由于其用于控制选中状态而非事件触发,导致获取到所有二级菜单信息,而非仅点击的菜单项。

解决方法是使用Angular的事件绑定(click)。 以下为改进后的代码示例,演示如何通过(click)事件获取点击菜单项的详细信息:

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

@Component({
  selector: 'nz-demo-menu-recursive',
  template: `
    
  `,
})
export class NzDemoMenuRecursiveComponent {
  mode = false;
  dark = false;
  menus = [
    { level: 1, title: 'Team Group2', Id: '11', children: [
      { level: 2, title: 'User 111', Id: '111', },
      { level: 2, title: 'User 2222', Id: '112', },
    ]},
    { level: 1, title: 'Team Group3', Id: '22', },
  ];

  click(data: any) {
    console.log(data); // 打印点击菜单项的 level, title, Id
  }
}

代码中,我们用(click)事件替换了[nzSelected]。 一级和二级菜单都绑定了(click)事件,并传递点击菜单项数据到click(data)方法。 该方法接收数据并使用console.log打印,从而精准获取leveltitleId信息。 这有效解决了只获取特定菜单项信息的问题。 请注意,实际的菜单模板(用ng-container和数据绑定实现)需要根据您的具体实现进行调整。

Viggle AI
Viggle AI

Viggle AI是一个AI驱动的3D动画生成平台,可以帮助用户创建可控角色的3D动画视频。

下载

相关专题

更多
console接口是干嘛的
console接口是干嘛的

console接口是一种用于在计算机命令行或浏览器开发工具中输出信息的工具,提供了一种简单的方式来记录和查看应用程序的输出结果和调试信息。本专题为大家提供console接口相关的各种文章、以及下载和课程。

412

2023.08.08

console.log是什么
console.log是什么

console.log 是 javascript 函数,用于在浏览器控制台中输出信息,便于调试和故障排除。想了解更多console.log的相关内容,可以阅读本专题下面的文章。

498

2024.05.29

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

9

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

3

2026.01.21

无人机驾驶证报考 uom民用无人机综合管理平台官网
无人机驾驶证报考 uom民用无人机综合管理平台官网

无人机驾驶证(CAAC执照)报考需年满16周岁,初中以上学历,身体健康(矫正视力1.0以上,无严重疾病),且无犯罪记录。个人需通过民航局授权的训练机构报名,经理论(法规、原理)、模拟飞行、实操(GPS/姿态模式)及地面站训练后考试合格,通常15-25天拿证。

14

2026.01.21

Python多线程合集
Python多线程合集

本专题整合了Python多线程相关教程,阅读专题下面的文章了解更多详细内容。

1

2026.01.21

java多线程相关教程合集
java多线程相关教程合集

本专题整合了java多线程相关教程,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

windows激活码分享 windows一键激活教程指南
windows激活码分享 windows一键激活教程指南

Windows 10/11一键激活可以通过PowerShell脚本或KMS工具实现永久或长期激活。最推荐的简便方法是打开PowerShell(管理员),运行 irm https://get.activated.win | iex 脚本,按提示选择数字激活(选项1)。其他方法包括使用HEU KMS Activator工具进行智能激活。

2

2026.01.21

excel表格操作技巧大全 表格制作excel教程
excel表格操作技巧大全 表格制作excel教程

Excel表格操作的核心技巧在于 熟练使用快捷键、数据处理函数及视图工具,如Ctrl+C/V(复制粘贴)、Alt+=(自动求和)、条件格式、数据验证及数据透视表。掌握这些可大幅提升数据分析与办公效率,实现快速录入、查找、筛选和汇总。

6

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
10分钟--Midjourney创作自己的漫画
10分钟--Midjourney创作自己的漫画

共1课时 | 0.1万人学习

Midjourney 关键词系列整合
Midjourney 关键词系列整合

共13课时 | 0.9万人学习

AI绘画教程
AI绘画教程

共2课时 | 0.2万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号