Angular 5如何在mat-tab-group头部添加搜索栏等非标签元素？

当然可以！在Angular 5的mat-tab-group组件中，完全能在标签标题栏里渲染搜索栏、图片这类非标签元素，下面分享两种实用的实现方式：

方法一：自定义mat-tab-header模板（推荐） #

Angular Material的mat-tab-group支持通过<ng-template matTabHeader>来自定义整个标题栏内容，这样你可以自由组合标签和其他元素。

模板代码示例 #

<mat-tab-group>
  <!-- 自定义标题栏 -->
  <ng-template matTabHeader>
    <div class="custom-tab-header">
      <!-- 保留原有的标签导航 -->
      <mat-tab-header-items>
        <mat-tab-header-item *ngFor="let tab of tabGroup._tabs" [active]="tab.isActive">
          {{ tab.textLabel }}
        </mat-tab-header-item>
      </mat-tab-header-items>
      <!-- 添加搜索栏 -->
      <div class="search-container">
        <mat-form-field appearance="outline">
          <input matInput placeholder="搜索标签..." [(ngModel)]="searchQuery">
        </mat-form-field>
      </div>
    </div>
  </ng-template>

  <!-- 你的标签内容 -->
  <mat-tab label="标签1">标签1内容</mat-tab>
  <mat-tab label="标签2">标签2内容</mat-tab>
  <mat-tab label="标签3">标签3内容</mat-tab>
</mat-tab-group>

样式调整（CSS） #

需要添加一些样式来让标题栏布局更合理：

.custom-tab-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
}

.search-container mat-form-field {
  width: 200px;
  font-size: 14px;
}

组件类补充 #

在组件类里需要获取mat-tab-group的实例，用来遍历标签：

import { ViewChild } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent {
  @ViewChild(MatTabGroup) tabGroup: MatTabGroup;
  searchQuery: string = '';
}

方法二：CSS绝对定位快速实现 #

如果不想修改标题栏的整体结构，可以通过绝对定位把搜索栏放到标题栏的右侧：

模板代码 #

<mat-tab-group class="tab-group-with-search">
  <div class="search-bar">
    <mat-form-field appearance="outline">
      <input matInput placeholder="搜索标签..." [(ngModel)]="searchQuery">
    </mat-form-field>
  </div>

  <mat-tab label="标签1">标签1内容</mat-tab>
  <mat-tab label="标签2">标签2内容</mat-tab>
  <mat-tab label="标签3">标签3内容</mat-tab>
</mat-tab-group>

样式代码 #

.tab-group-with-search {
  position: relative;
}

.search-bar {
  position: absolute;
  top: 8px;
  right: 16px;
}

.search-bar mat-form-field {
  width: 200px;
  font-size: 14px;
  background: white;
}

这两种方法都能实现需求，方法一更灵活，适合需要对标题栏做更多自定义的场景；方法二更简单快速，适合快速添加搜索栏的情况。

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