Angular中PrimeNg TabMenu/TabView自定义及路由链接问题

一、给每个标签设置独立routerLink #

PrimeNg的TabMenu支持直接在model数组的每个项中配置routerLink，不用额外修改组件结构，只要在组件类里定义items时加上对应路由路径即可：

// 组件类中的items定义
items: MenuItem[] = [
  { label: '首页', routerLink: '/' },
  { label: '用户管理', routerLink: '/users' },
  { label: '设置', routerLink: '/settings' },
  // 可添加更多标签项
];

确保你的Angular项目已正确配置路由模块（导入RouterModule并定义好对应路由规则），点击标签即可跳转到对应路由。

二、自定义样式（占视口90%居中+标签宽度匹配） #

PrimeNg组件样式默认被Angular视图封装隔离，直接写CSS不会生效，需用::ng-deep穿透封装，以下是具体实现：

HTML代码（微调容器类名，结构基本不变） #

<div class="tab-menu-container">
  <p-tabMenu [model]="items"></p-tabMenu>
</div>

组件样式代码 #

/* 容器样式：占视口90%宽度，水平居中 */
.tab-menu-container {
  width: 90vw;
  margin: 0 auto;
}

/* 穿透PrimeNg的TabMenu样式，调整整体布局 */
::ng-deep .p-tabmenu {
  width: 100%;
}

::ng-deep .p-tabmenu-nav {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* 让每个标签项均分宽度，文本居中（匹配多数示例图样式） */
::ng-deep .p-tabmenu-nav .p-tabmenuitem {
  flex: 1;
  text-align: center;
}

/* 调整标签按钮占满项宽度，确保点击区域完整 */
::ng-deep .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
  width: 100%;
  justify-content: center;
}

如果示例图中标签不是均分宽度，只需把flex:1改成固定宽度（比如width: 200px）或其他你需要的样式即可。

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