如何通过PrimeNG原生方法重新加载TabMenu当前激活项？

首先明确：PrimeNG TabMenu 目前没有原生的 onSameActiveItem 这类直接触发重载的配置属性，但可以通过以下两种贴近原生逻辑的方式实现需求：

方法一：通过修改 activeItem 触发更新 #

利用 TabMenu 依赖 activeItem 绑定值变化触发更新的特性，通过临时切换再恢复激活项的方式，触发重载逻辑：

1. 在组件类中实现重载方法：

reloadCurrentTab() {
  const tempItem = this.activeItem;
  this.activeItem = null; // 临时置空触发变更检测
  setTimeout(() => {
    this.activeItem = tempItem; // 恢复原激活项
    // 结合路由触发组件重载
    this.router.navigate([tempItem.routerLink]);
  });
}

2. 自定义 TabMenu 项的点击事件，实现点击当前项触发重载：

<p-tabMenu
  [model]="items"
  [activeItem]="activeItem"
  (activeItemChange)="onActiveItemChange($event)"
>
  <ng-template pTemplate="item" let-item>
    <span (click)="handleTabClick(item)">{{ item.label }}</span>
  </ng-template>
</p-tabMenu>
<div class="router-container">
  <router-outlet></router-outlet>
</div>

3. 点击处理逻辑：

handleTabClick(item) {
  if (item === this.activeItem) {
    this.reloadCurrentTab(); // 点击当前项时触发重载
  } else {
    this.activeItem = item;
    this.router.navigate([item.routerLink]);
  }
}

方法二：自定义指令扩展 TabMenu #

如果需要更通用的复用方案，可以自定义指令监听当前项的点击并触发重载：

import { Directive, HostListener, Input } from '@angular/core';
import { TabMenu } from 'primeng/tabmenu';

@Directive({
  selector: '[pTabMenuReloadOnSameItem]'
})
export class TabMenuReloadDirective {
  @Input() reloadCallback: () => void;

  constructor(private tabMenu: TabMenu) {}

  @HostListener('click', ['$event'])
  onClick(event: MouseEvent) {
    const targetItem = this.tabMenu.items.find(item => 
      event.target instanceof HTMLElement && event.target.closest('.p-tabmenuitem')?.contains(item.element.nativeElement)
    );
    if (targetItem && targetItem === this.tabMenu.activeItem) {
      this.reloadCallback?.();
    }
  }
}

模板中使用该指令：

<p-tabMenu
  [model]="items"
  [activeItem]="activeItem"
  (activeItemChange)="onActiveItemChange($event)"
  pTabMenuReloadOnSameItem
  [reloadCallback]="reloadCurrentTab"
/>

路由场景补充 #

如果你的组件基于路由渲染，还可以通过配置路由的 onSameUrlNavigation 来触发组件重新初始化：

1. 在路由模块中配置：

RouterModule.forRoot(routes, {
  onSameUrlNavigation: 'reload'
})

2. 在重载方法中调用：

reloadCurrentTab() {
  this.router.navigate([this.activeItem.routerLink], {
    skipLocationChange: false
  });
}

内容的提问来源于stack exchange，提问作者Erik Vasilyan