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

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.
  }}
];

- Ali

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

- Niran Manandhar

Answer 2

您需要将模型绑定到上下文菜单中，就像文档中所述，然后以编程方式更改模型并打开菜单。

1. 从p-contextMenu中删除target属性-这将防止开箱即用的菜单切换机制。（<p-contextMenu #contextMenu appendTo="body" [model]="contextMenuItems"></p-contextMenu>）

2. 不要引用（<div #blockContextMenu></div>），使用事件绑定（<div (contextmenu)="openContextMenu($event, dataYouNeedToPass)"></div>）

3. 在您的组件中，使用@ViewChild来访问上下文菜单并声明一个空模型：

@ViewChild('contextMenu', { static: false }) contextMenu: ContextMenu;
contextMenuItems: MenuItem[] = [];

4. 添加openContextMenu函数以编程方式更改模型并打开上下文菜单：

openContextMenu(event: MouseEvent, dataYouNeedToPass: any): void {
  this.contextMenuItems = [{
    label: 'Action One',
    command: (event) => this.doActionOne(dataYouNeedToPass)
  },
  {
    label: 'Action Two',
    command: (event) => this.doActionTwo(dataYouNeedToPass)
  }];
  this.documentActionContextMenu.show(event);
  event.stopPropagation();
}

- noamyg

Answer 3

由于“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);
  }

- MagicLuckyCat

Answer 4

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

[contextMenu]="cm"

在你想要显示的元素中，例如，你想在你的 div 上显示上下文菜单，你需要提到：

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

同样在p-contextMenu元素中，您需要提到从您的div中获取上下文菜单的变量。

希望这能帮到你。

- Hrishikesh Kale

---

2018年有这个东西吗？它的工作方式与你描述的不同。 - J-Eibe

Answer 5

我们可以通过将数据推送到命令属性回调函数来获取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));
  }

- Ravindra Vairagi