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吗？ e.g。

<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的一部分

单击项目时调用的函数是使用命令属性。

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

Answer 2

只需将其作为参数传递给函数

(click)="getActiveItem(activeItem)"

Answer 3

我刚刚解决了它，方法是在引用菜单的模板中创建一个变量，然后将其传递给函数，在该函数内部，您可以使用活动标签获取对象。

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

如何从Primeng

3 个答案: