我如何从 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 的 link。 CLICK

Answer 1

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

(click)="getActiveItem(activeItem)"

Answer 2

您应该可以使用 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
  }}
];

Answer 3

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

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

Answer 4

老问题，但可能需要解决方案。最简单的方法是使用模板。首先声明项目：

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'}
];

现在在您的 HTML 中：

<ng-template pTemplate="item" let-item let-i="index">
  <div (click)="onTabItemClick(i)">
    <span>
      <i class="{{ item.icon }}"></i>
    </span>
    {{ item.label }}
  </div>
</ng-template>

终于实现了一个基本的方法：

onTabItemClick(i: number) {
  console.log(this.items[i])
}

点击时我们通过索引检索项目。

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

How do i get the selected Item in a Tabmenu from Primeng

typescript

primeng

angular

angular5