我如何从 Primeng 的 Tabmenu 中获取所选项目

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>

我知道我可以tabmenu在 activeItem 的帮助下设置 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;
  }

PS从Primeng到TabMenu的链接。点击

Answer 1

您应该可以使用，command因为选项卡是 MenuModel API 的一部分

单击项目时调用的函数是使用command属性定义的 。

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

Answer 2

我只是通过在引用菜单的模板中创建一个变量来解决它，然后将其传递给一个函数，在函数内您将获得带有活动选项卡的对象。

<p-tabMenu #tab [model]="items" (click)="activateMenu(tab)"></p-tabMenu>