Блог

У меня проблема с PrimeNG p-tabMenu для меню, которые отключены.

Скажем, например, у меня есть tabMenu с 4 вложенными вкладками -> AAA, BBB, CCC, DDD.

Вот как настраиваются элементы меню в компоненте ts.

 //....

invDocs: InventoryDocs[] = [];
invMenu: InventoryDocs[] = [];
this.invMenu = this.data.cdMenu;
this.invDoc = this.data.cdDocs;
this.menuItems = []; 
if(this.invMenu != null amp;amp; this.invMenu.length > 1){
    this.showMenu = true;
    for (let i = 0; i < this.invMenu.length; i  ) {                  
        this.menuItems.push({label: this.invMenu[i].fileDescr, id:  this.invMenu[i].menuId, disabled: this.invMenu[i].subCount > 0});
        this.activeItem = this.menuItems[0];
    }
    this.currentPdf = this.invDoc.docBlob;
}
                
            


activateMenu(tab){ 
    console.log(tab);
    this.invDocId = tab.activeItem.id;
    this.showMenu = true;
    this.retriveCurrentPdf(this.invDocId);
}           
                
.....//
 

введенное значение выборки:

 this.menuItems.push({lable: 'AAA', id: 1, disabled: false});
this.menuItems.push({lable: 'BBB', id: 1, disabled: true});
this.menuItems.push({lable: 'CCC', id: 1, disabled: true});
this.menuItems.push({lable: 'DDD', id: 1, disabled: false});
 

По умолчанию для параметра «AAA» установлено значение active.

мой компонент html выглядит следующим образом:

 <div style="width: 3em;">
       <p-tabMenu #tab [model]="menuItems" [activeItem]="activeItem" (click)="activateMenu(tab)" class="customWrapper" ></p-tabMenu> 
</div> 
 

Страница отображается с 4 вкладками, где включены AAA и DDD, а BBB, CCC отключены. Событие щелчка на вкладке вызывает activateMenu метод и отображает diff pdf в пользовательском интерфейсе.

Проблема связана с этим событием щелчка, которое также запускается для отключенных кнопок. Несмотря на то, что вкладки BBB, CCC отключены, это позволяет мне щелкнуть вкладку, но ActiveItem на вкладке # сохраняется из того, что было ранее активным, поэтому я не могу остановить распространение события. Скажем, когда страница загружается, по умолчанию используется вкладка AAA. Теперь, несмотря на то, что BBB отключен, он позволяет мне щелкнуть вкладку «BBB», и когда я печатаю console.log в activateMenu() ActiveItem в label и id, отображается вкладка AAA. Может кто-нибудь подсказать мне, как предотвратить щелчок для отключенных вкладок, пожалуйста?

Я думаю, вам лучше использовать command функцию, которая является частью MenuItem . Эта функция будет срабатывать при щелчке, только если вкладка не отключена.

 this.items = [
  {
    label: "Home",
    icon: "pi pi-fw pi-home",
    command: event => {
      this.activateMenu(event);
    }
  },
  {
    label: "Edit",
    icon: "pi pi-fw pi-pencil",
    disabled: true,
    command: event => {
      this.activateMenu(event); // this one won't be triggered because tab is disabled
    }
  }
]

activateMenu(event) {
    console.log("click on "   event.item.label   " tab!");
}
 

Смотрите демонстрацию