Angular Material Tab焦点切换及添加新建Tab按钮实现问题

我之前在项目里刚好碰到过一模一样的需求，给你分享下具体的实现思路和代码：

一、在标签栏末尾添加新建Tab按钮（避免误聚焦） #

直接放按钮确实会和Tab对齐有问题，用模拟Tab的思路是对的，但要做几个关键处理来阻止它被选中和获取焦点：

1. 用<mat-tab>包裹按钮，拦截默认选中行为
   在<mat-tab-group>的最后添加一个空内容的<mat-tab>，用ng-template mat-tab-label把按钮嵌进去，点击按钮时阻止事件冒泡（避免触发Tab的选中逻辑），然后执行新建Tab的代码：

   <mat-tab-group #tabGroup>
     <!-- 你的业务Tab，这里用循环示例 -->
     <mat-tab *ngFor="let tab of tabs; let i = index" [label]="tab.label">
       {{ tab.content }}
     </mat-tab>
   
     <!-- 模拟新建按钮的Tab -->
     <mat-tab>
       <ng-template mat-tab-label>
         <button 
           mat-icon-button 
           (click)="$event.stopPropagation(); addNewTab(tabGroup)"
           aria-label="新建标签页"
         >
           <mat-icon>add</mat-icon>
         </button>
       </ng-template>
       <!-- 这个Tab的内容留空即可，永远不会被选中 -->
     </mat-tab>
   </mat-tab-group>
   

2. TS逻辑：创建新Tab并自动选中
   在组件里维护Tab数据数组，新建后自动切换到新Tab，确保焦点落在真实的业务Tab上：

   import { ViewChild } from '@angular/core';
   import { MatTabGroup } from '@angular/material/tabs';
   
   // ...
   
   tabs = [
     { label: '首页', content: '首页内容' },
     { label: '设置', content: '设置内容' }
   ];
   
   @ViewChild('tabGroup') tabGroup!: MatTabGroup;
   
   addNewTab(tabGroup: MatTabGroup) {
     const newTabIndex = this.tabs.length;
     this.tabs.push({
       label: `新标签 ${newTabIndex + 1}`,
       content: `新标签内容 ${newTabIndex + 1}`
     });
     // 延迟设置选中，确保DOM更新完成
     setTimeout(() => {
       tabGroup.selectedIndex = newTabIndex;
     });
   }
   

3. CSS调整样式，确保对齐和无选中状态
   给模拟Tab加样式，去掉选中时的高亮，让按钮和其他Tab完全对齐：

   /* 让按钮占满Tab标签的高度，对齐其他Tab */
   .mat-tab-label:last-of-type .mat-icon-button {
     height: 100%;
     padding: 0 16px;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   /* 阻止模拟Tab被选中时的样式变化 */
   .mat-tab-label:last-of-type.mat-tab-label-active {
     opacity: 1;
     color: inherit;
     border-bottom: none;
   }
   

二、取消当前Tab焦点并切换到其他Tab #

Angular Material的Tab焦点和选中状态是关联的，通常切换选中Tab就会自动转移焦点，具体有两种场景：

场景1：直接切换到指定Tab（同时转移焦点） #

如果需要主动切换到某个Tab，直接通过MatTabGroup的selectedIndex属性设置即可，焦点会自动跟着转移：

switchToTargetTab(targetIndex: number) {
  if (targetIndex >= 0 && targetIndex < this.tabs.length) {
    this.tabGroup.selectedIndex = targetIndex;
  }
}

场景2：手动控制焦点（不切换选中状态） #

如果只是想转移焦点而不改变选中状态，可以通过ViewChildren获取所有Tab标签元素，手动调用focus()方法：

import { ViewChildren, QueryList } from '@angular/core';
import { MatTabLabel } from '@angular/material/tabs';

// ...

@ViewChildren(MatTabLabel) tabLabels!: QueryList<MatTabLabel>;

switchFocusToTab(targetIndex: number) {
  // 先让当前焦点元素失焦
  document.activeElement?.blur();
  // 聚焦到目标Tab标签
  const targetLabel = this.tabLabels.get(targetIndex);
  if (targetLabel) {
    targetLabel.focus();
  }
}

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