0

0

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

心靈之曲

心靈之曲

发布时间:2025-03-03 16:04:01

|

1017人浏览过

|

来源于php中文网

原创

angular嵌套菜单点击事件处理:精准获取level、title和id

本文介绍如何在Angular应用中,从嵌套菜单结构中准确获取用户点击菜单项的leveltitleId信息。 问题在于,直接使用nz-menu组件的[nzSelected]属性会同时选中多个菜单项。 因此,我们需要利用Angular的click事件绑定机制来解决这个问题。

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

改进后的代码:

为了清晰起见,我们对代码结构进行了一些调整,并添加了必要的注释:

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

@Component({
  selector: 'nz-demo-menu-recursive',
  template: `
    
  • {{ menu.title }}
    • {{ child.title }}
`, }) 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('Clicked item:', data); // 输出点击项的详细信息 } }

核心改进:

如此AI员工
如此AI员工

国内首个全链路营销获客AI Agent

下载

我们用(click)事件替换了[nzSelected]。 现在,每个菜单项

  • 都绑定了(click)事件,调用click()方法并将点击的菜单项数据作为参数传递。 click()方法直接打印出点击项的leveltitleId信息。 这确保了无论点击哪一级菜单项,都能准确获取到对应的信息。 我们使用了更简洁的模板语法,并对代码进行了注释,使其更易于理解。

    通过这种方法,我们可以有效地避免[nzSelected]属性导致的多选问题,并精确地获取Angular嵌套菜单中用户点击项的详细信息。

  • 相关专题

    更多
    Golang 性能分析与pprof调优实战
    Golang 性能分析与pprof调优实战

    本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

    0

    2026.01.22

    html编辑相关教程合集
    html编辑相关教程合集

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

    38

    2026.01.21

    三角洲入口地址合集
    三角洲入口地址合集

    本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

    19

    2026.01.21

    AO3中文版入口地址大全
    AO3中文版入口地址大全

    本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

    255

    2026.01.21

    妖精漫画入口地址合集
    妖精漫画入口地址合集

    本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

    64

    2026.01.21

    java版本选择建议
    java版本选择建议

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

    3

    2026.01.21

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

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

    14

    2026.01.21

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

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

    6

    2026.01.21

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

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

    29

    2026.01.21

    热门下载

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

    精品课程

    更多
    相关推荐
    /
    热门推荐
    /
    最新课程
    Django 教程
    Django 教程

    共28课时 | 3.3万人学习

    【web前端】Node.js快速入门
    【web前端】Node.js快速入门

    共16课时 | 2万人学习

    550W粉丝大佬手把手从零学JavaScript
    550W粉丝大佬手把手从零学JavaScript

    共1课时 | 0.3万人学习

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

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