menu获得被点击的值信息

Question

根据官网代码改

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

@Component({
  selector: 'nz-demo-menu-recursive',
  template: `
    <ul nz-menu nzMode="inline" style="width: 260px;">
        <ng-container *ngFor="let menu of menus">
          <li
            *ngIf="menu.hasOwnProperty('children')"
            nz-submenu
            [nzPaddingLeft]="menu.level * 24"
            [nzTitle]="menu.title"
          >
            <ul>
              <li nz-menu-item *ngFor="let child of menu.children"
              [nzSelected]="click(child)" 
              >  {{child.title}}</li>
            </ul>
          </li>

           <li *ngIf="!menu.hasOwnProperty('children')" nz-menu-item>
          <span>{{ menu.title }}</span>
          </li>
        </ng-container>
    </ul>
  `,
})
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) {
    console.log(data);
  }
}

生成效果

问题
点击user111或者2222或者没有二级的group3时，我想获得他的信息，level/title/Id

[nzSelected]尝试过，但是是两个二级的信息都会出现，我现在只需要一个特定的信息，应该怎么写呢

Answer 1

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

@Component({
  selector: 'nz-demo-menu-recursive',
  template: `
    <ul nz-menu nzMode="inline" style="width: 260px;">
        <ng-container *ngFor="let menu of menus">
          <li
            *ngIf="menu.hasOwnProperty('children')"
            nz-submenu
            [nzPaddingLeft]="menu.level * 24"
            [nzTitle]="menu.title" 
          >
            <ul>
              <li nz-menu-item *ngFor="let child of menu.children"
              (click)="click(child)" 
              >  {{child.title}}</li>
            </ul>
          </li>

           <li *ngIf="!menu.hasOwnProperty('children')" nz-menu-item (click)="click(menu)">
          <span>{{ menu.title }}</span>
          </li>
        </ng-container>
    </ul>
  `,
})
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) {
    console.log(data);
  }
}

使用(click)就可以了

Answer 2

click 事件呢？

话说不会有 nz-menu-item 嘛？

nzSelected 这个是用来默认选中的吧。

---

所以应该是 nzClick。 angular 不熟，溜了溜了

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。