Как получить выбранный предмет в табмену от Primeng

Question

У меня есть простой массив MenuItem, который я использую, чтобы заполнить компонент Tabmenu из primeng. Это выглядит примерно так:

.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, например, так:

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 ссылка на TabMenu от Primeng. CLICK

Answer 1

Вы должны быть в состоянии использовать command поскольку вкладки являются частью API MenuModel

Функция, вызываемая при щелчке элемента, определяется с помощью свойства 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>

Answer 3

Старый вопрос, но может потребоваться решение. Самый простой способ — использовать шаблоны. Сначала вы объявляете элементы:

      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])
}

При клике мы извлекаем элемент по его индексу.

Answer 4

Просто передайте его в качестве параметра функции

(click)="getActiveItem(activeItem)"