PrimeNg 上下文菜单传递数据问题答案

【问题标题】：PrimeNg context menu passing data issuePrimeNg 上下文菜单传递数据问题
【发布时间】：2021-03-18 17:35:00
【问题描述】：

我正在使用 PrimeNg 的上下文菜单 v6.0.1，问题是文档不清楚，我也无法在网上找到关于如何将数据传递给命令函数的文档，例如：

我在屏幕上呈现了 10 个对象，并且上下文菜单附加到所有这些对象，现在如果我单击菜单项，我想获取呈现上下文菜单的目标对象的 id，这怎么可能完成了吗？

<div id="block-container" *ngFor="let block of blocks">

    <!-- where to attach this block object ??? -->

    <p-contextMenu appendTo="body" 
      [target]="blockContextMenu" 
      [model]="contextMenuItems">
    </p-contextMenu>

    <div #blockContextMenu>
       Some implementation...
    </div>
</div>

以下是我的物品模型：

this.contextMenuItems = [
  {
    label: 'Trip Details',
    command: (event) => {
      // event doesn't contain anything useful,
      // and only has the clicked menu item specific information.
  }}
];

【问题讨论】：

标签： angular primeng angular6

【解决方案1】：

  @ViewChild('copyMenu') copyMenu: ContextMenu;
  
    onLinkRightClicked(content: string, e: any): void {

    if (this.copyMenu) {
      let model: MenuItem[] = [];
      model.push({ label: 'Action', command: (event) => this.doAction(content) });
      this.copyMenu.model = model;
      this.copyMenu.show(e);
    }
  }
  
  doAction(content){
    // here 
  }

<div #blockContextMenu (contextmenu)="onLinkRightClicked(content, $event)">
       Some implementation...
</div>

<p-contextMenu appendTo="body" #targetContextMenu>
</p-contextMenu>

【讨论】：

【解决方案2】：

要使用primeng正确实现上下文菜单，您需要添加

[contextMenu]="cm"

在您想要显示的元素中，例如，您希望在 div 上显示上下文菜单，您需要提及

<div id="block-container" *ngFor="let block of blocks" [contextMenu]="cm"></div>

同样在 p-contextMenu 元素中，你需要从你的 div 中提到上下文菜单的变量，比如

希望这会有所帮助。

【讨论】：

【解决方案3】：

我们可以通过将数据推送到命令property回调函数来获取PrimeNG上下文菜单项点击的数据。

下面的示例代码也是第 N 级动态上下文菜单创建的示例。

例如-

[
  {
    "ID": 1,
    "TITLE": "parent1",
    "SUBMENU": [
      {
        "ID": 2,
        "SUBMENU": [
          {
            "ID": 3,
            "SUBMENU": [
              {
                "ID": 4,
                "TITLE": "Child 1"
              }
            ]
          },
          {
            "ID": 13,
            "SUBMENU": [
              {
                "ID": 5,
                "TITLE": "Child 3"
              }
            ]
          },
          {
            "ID": 6,
            "SUBMENU": [
              {
                "ID": 7,
                "SUBMENU": [
                  {
                    "ID": 8,
                    "TITLE": "Child 4"
                  }
                ]
              },
              {
                "ID": 9,
                "SUBMENU": [

                ]
              }
            ],

          },
          {
            "ID": 10,
            "SUBMENU": [
              {
                "SUBMENU": [

                ]
              }
            ]
          }
        ],

      }
    ],

  },
  {
    "ID": 11,
    "TITLE": "parent2",
    "SUBMENU": [
      {
        "ID": 12,
        "TITLE": "Child 4"
      }
    ],

  }
]

根据上面的 JSON，我创建了 PrimeNG 上下文菜单项。

createContextMenuRecursive(object: any[]): MenuItem[] {
    if (object) {
      let menuList: MenuItem[] = [];
      for (var i = 0; i < object.length; i++) {
        if (object[i].ITEMS && object[i].ITEMS.length > 0) {
          let returnedList = this.createContextMenuRecursive(object[i].ITEMS);
          menuList.push(this.createMenuItem(object[i], returnedList));
        }
        else {
          menuList.push(this.createMenuItem(object[i]));
        }
      }
      return menuList;
    }
  }

以下函数用于创建PrimeNG上下文菜单项，其中参数data:any表示我们需要在命令函数中使用的数据。

createMenuItem(data: any, menuItems: MenuItem[] = []): MenuItem {
    if (menuItems.length > 0) {
      return { label: data.TITLE, items: menuItems, command: (event) => this.docGridContextMenuItemClick(event, data) };
    }
    else {
      return { label: data.TITLE, command: (event) => this.docGridContextMenuItemClick(event, data) };
    }
  }

我们使用数据的上下文菜单项单击事件处理程序。

docGridContextMenuItemClick(event: any, data: any) {
    console.log(JSON.stringify(data));
  }

【讨论】：

【解决方案4】：

由于“Id”是唯一的，您只需使用 command() 函数传递它：

https://primeng-panelmenu-return-id.stackblitz.io

  items: MenuItem[];

  ngOnInit() {
    this.items = [
      { label: "Rename", id: "1", command: () => this.onClickMenuItem("1") },
      { label: "Delete", id: "2", command: () => this.onClickMenuItem("2") },
      { label: "Add", id: "3", command: () => this.onClickMenuItem("3") }
    ];
  }

  onClickMenuItem(id: string) {
    console.log(id);
  }

【讨论】：