PrimeNG MenuCallback

Question

我使用的是卓越的prime-ng库中的p-panelmenu。

<p-panelMenu [model]="items" (click)="onClicked(event)"></p-panelMenu>

问题是我不知道如何让菜单做任何事情。primeNG网站上的示例都会显示菜单，但不会触发任何操作。

如何获取当前选定的项目？我注意到在menuItem类上有一个“命令”回调；但是为每个菜单项定义一个回调似乎很疯狂。而不是只传递给所选菜单项的一个回调。这里我漏掉了什么？

Answer 1

我必须编写一个递归函数来遍历菜单项和子项，并为每个菜单项和子项分配一个命令回调：

export class TreeViewComponent implements OnInit {
  @Output() onSelectedChanged: EventEmitter<MenuItem> = new EventEmitter<MenuItem>();

  items : any[] = [];

  constructor (private contentService: ContentService) {
  }

  ngOnInit() {
      this.getFolders();
  }

  getFolders() {
    this.contentService.getFolders().subscribe(this.setItems);
  }

  setItems = (x: any) => {
      this.assignCallback(x);
      this.items = x.items;
  }

  assignCallback(item:MenuItem){
    if(item.items != null && item.items.length > 0) {
      item.items.forEach(x => this.assignCallback(x))
    }
    item.command = this.commandCallback;
  }

  commandCallback(ev){
    console.log(ev.item);
  }
}

我会把这个问题留下来；一定有更好的方法？

Answer 2

https://www.primefaces.org/primeng/#/menumodel

您可能想要阅读有关MenuItem类型的文档，了解大多数PrimeNG的菜单组件。在项可能具有的选项列表中，有一个执行回调的“command”选项。