如何在Angular Material Tabs组件末尾添加搜索输入或按钮？

当然可以实现！Angular Material的Tabs组件虽然没有直接提供这种默认配置，但我们完全可以通过自定义来达成你想要的效果——就像你提到的YouTube里把搜索框放在最后一项标签的样子。下面给你两种实用的解决方案：

方案1：添加搜索输入框作为最后一项 #

核心思路是利用mat-tab-label模板来自定义最后一个标签的内容，把搜索框嵌入进去，再通过样式调整让它和其他标签对齐。

模板代码 #

<mat-tab-group>
  <!-- 常规标签页 -->
  <mat-tab label="首页">
    <p>首页内容区域</p>
  </mat-tab>
  <mat-tab label="我的收藏">
    <p>收藏内容区域</p>
  </mat-tab>
  <!-- 自定义搜索标签项 -->
  <mat-tab (click)="$event.stopPropagation()">
    <ng-template mat-tab-label>
      <mat-form-field appearance="fill" class="search-tab">
        <input matInput placeholder="搜索内容..." />
        <mat-icon matSuffix>search</mat-icon>
      </mat-form-field>
    </ng-template>
    <!-- 这里可以留空，或者放置搜索结果的展示区域 -->
  </mat-tab>
</mat-tab-group>

样式调整（可选） #

为了让搜索框和其他标签的高度、间距更协调，添加以下CSS：

.search-tab {
  width: 220px;
  margin: 0 10px;
  
  /* 匹配标签栏的高度 */
  .mat-form-field-wrapper {
    padding-bottom: 0;
  }
  .mat-form-field-flex {
    align-items: center;
    height: 48px; /* 对应Angular Material标签栏的默认高度 */
  }
}

注意：给mat-tab添加(click)="$event.stopPropagation()"是为了阻止点击搜索框时切换到这个空标签页，让它只作为搜索入口使用。

方案2：添加按钮作为最后一项 #

和搜索框的思路一致，只是把标签内容换成按钮即可，适合添加新内容的场景。

模板代码 #

<mat-tab-group>
  <!-- 常规标签页 -->
  <mat-tab label="首页">
    <p>首页内容区域</p>
  </mat-tab>
  <mat-tab label="我的收藏">
    <p>收藏内容区域</p>
  </mat-tab>
  <!-- 自定义添加按钮标签项 -->
  <mat-tab (click)="handleAddClick($event)">
    <ng-template mat-tab-label>
      <button mat-raised-button color="accent">
        <mat-icon>add</mat-icon> 新建
      </button>
    </ng-template>
  </mat-tab>
</mat-tab-group>

组件逻辑（可选） #

在组件类中添加按钮点击事件的处理：

handleAddClick(event: MouseEvent) {
  event.stopPropagation(); // 阻止切换标签页
  // 这里写你的新建逻辑，比如打开弹窗、跳转页面等
  console.log("点击了新建按钮");
}

补充说明 #

这种自定义方式是Angular Material组件支持的常规用法，官方文档虽然没有专门的示例，但mat-tab-label模板就是用来扩展标签内容的。你可以根据需求进一步调整样式和交互，让它完全符合你的UI设计。

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