angular - 我如何从 Primeng 获取选项卡菜单中的选定项目

Question

我有一个简单的 MenuItem 数组，用于填充来自 primeng 的 Tabmenu 组件。这看起来像这样:

.ts 文件:

items = MenuItem[];
activeItem = MenuItem;

//constructor etc...

ngOnInit() {

    this.items = [
                {label: 'Homework', icon: 'fa-file-pdf-o'},
                {label: 'Movies', icon: 'fa-file-pdf-o'},
                {label: 'Games', icon: 'fa-file-pdf-o'},
                {label: 'Pictures', icon: 'fa-file-pdf-o'}
            ];
this.activeItem = this.items[2]
}

.html 文件:

<p-tabMenu [model]="items" [activeItem]="activeItem"></p-tabMenu>

我知道我可以在 activeItem 的帮助下设置 tabmenu 的 Active 项目，如下所示:

this.activeItem = this.items[2]

我现在的问题是我能否以某种方式在单击时检索 activeItem？例如

<p-tabMenu [model]="items" [activeItem]="activeItem" (click)="getActiveItem(...)"></p-tabMenu>

getActiveItem 方法:

getActiveItem(activeItem: MenuItem){
    this.activeItem = activeItem;
    console.log(activeItem);
    return this.activeItem;
  }

P.S 来自 Primeng 的 TabMenu 链接。 CLICK

Answer 1

您应该能够使用 command因为选项卡是 MenuModel API 的一部分

The function to invoke when an item is clicked is defined using the command property.

this.items = [
   ...
  {label: 'Pictures', icon: 'fa-file-pdf-o', command: (event) => {
    //event.originalEvent: Browser event
    //event.item: menuitem metadata
  }}
];