angular - PrimeNG 菜单回调

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

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