PrimeNG p-tree 组件上的动态上下文菜单

Question

我在 Angular 应用程序中使用 PrimeNG UI 库 v10。我有一个p-tree 组件，它显示了当用户右键单击它们时必须显示上下文菜单的项目列表。问题是每个项目都有不同的选项，具体取决于其类型。所以，我需要运行一些逻辑来显示/隐藏适当的上下文菜单选项，然后再弹出它们。这是代码：

<p-tree [value]="treeItems" selectionMode="single" [(selection)]="selectedItem" [contextMenu]="treeContextMenu"></p-tree>

<p-contextMenu #treeContextMenu [model]="menuItems"></p-contextMenu>

我尝试将contextMenu 属性绑定到返回ContextMenu 引用并在那里运行逻辑的方法，但它不起作用。比如：

<p-tree [value]="treeItems" selectionMode="single" [(selection)]="selectedItem" [contextMenu]="buildContextMenu()"></p-tree>

<p-contextMenu #treeContextMenu [model]="menuItems"></p-contextMenu>

// IN THE COMPONENT CODE:

@ViewChild('treeContextMenu') treeContextMenu: ContextMenu;

public buildContextMenu(): ContextMenu {
  // Get the tree selected item to see which menu options should be visible
  const menuItemsToShow = this.getItemMenuOptions();

  // Update the context menu items (so it'll be updated in the 'treeContextMenu' component)
  this.menuItems = menuItemsToShow;

  // Return the reference to the context menu
  return this.treeContextMenu;
}

上面的代码显示了上下文菜单，但我不能点击任何选项（它什么都不做）。另一种方法是为每个树项添加一个contextmenu 事件侦听器，以显示每个树项的自定义上下文菜单，但我不喜欢它，因为可能有数百个项目及其相应的侦听器.对更优化的方法有什么建议吗？

提前致谢，

Answer 1

我遇到了同样的问题，并使用 ngDoCheck 钩子来观察 p-tree 中的选定节点。当在选定节点上检测到任何更改时 - 即使左键或右键单击 - menuContent 项目也会重新排列。因此，每次用户都可以获得正确的菜单内容项。

<p-tree [value]="treeData" [filter]="true" 
    [contextMenu]="contextMenu" selectionMode="single" 
    [(selection)]="selectedDocumentFolder">
    
export class DocumentFoldersComponent implements OnInit {
  // Set initial value important to catch first change
  selectedDocumentFolder: any = null;
  contextMenuItems: MenuItem[];

  constructor(injector: Injector, private differs: KeyValueDiffers) {
    super(injector);
    this.differ = this.differs.find({}).create();
  }

  ngDoCheck() {
    const change = this.differ.diff(this);
    if (change) {
      change.forEachChangedItem((item) => {
        console.log("item changed", item);
        if (item.key === "selectedDocumentFolder") {
          this.initContextMenu();
        }
      });
    }
  }

  initContextMenu() {
    // do your context menu logic here according to new selected node
  }
}