禁用选项卡的 PrimeNG tabMenu 单击事件被禁用

Question

我的 PrimeNG p-tabMenu 菜单被禁用时出现问题。

例如我有一个带有 4 个子选项卡的 tabMenu -> 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 && 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' 设置为活动。

我的组件 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 方法并在 UI.

中显示 diff pdf

问题在于此点击事件也会被禁用的按钮触发。即使禁用了 BBB、CCC 选项卡，它仍允许我单击选项卡，但选项卡# 中的 activeItem 保留了以前处于活动状态的内容，因此我无法停止事件传播。说当页面加载时它默认为 AAA 选项卡。现在，即使 BBB 已禁用，它也允许我单击选项卡 'BBB'，当我在 activateMenu() 中打印 console.log 时，标签和 id 中的 activeItem 显示选项卡 AAA 的活动项。有人可以建议我如何防止点击已禁用的标签吗？

Answer 1

我认为您应该使用 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!");
}

见demo

禁用选项卡的 PrimeNG tabMenu 单击事件被禁用

PrimeNG tabMenu click event to be disabled for disabled tabs

java

angular

typescript

primeng

tabmenu