Question

我正在使用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.
  }}
];

Answer 1

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

[contextMenu]="cm"

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

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

同样在p-contextMenu元素中，您需要像

一样从div中提到上下文菜单的变量。

希望这会有所帮助。

Answer 2

  @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>

Answer 3

只需将数据推送到命令属性回调函数中，我们就可以在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上下文菜单项，其中参数数据：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));
  }

Answer 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);
  }

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

4 个答案: