Angular 16中封装第三方父子组件的实现方案咨询

针对Angular Material标签组这类带父子结构的组件，可通过内容投影+组件查询的方式处理未知数量的子组件，以下是具体实现步骤：

1. 创建自定义Tab子组件（app-tab） #

该组件封装单个标签项，负责接收标签标题和内容，内部关联原生mat-tab：

app-tab.component.ts #

import { Component, Input, ViewChild, TemplateRef } from '@angular/core';
import { MatTabModule } from '@angular/material/tabs';

@Component({
  selector: 'app-tab',
  standalone: true,
  imports: [MatTabModule],
  templateUrl: './app-tab.component.html'
})
export class AppTabComponent {
  @Input() label!: string;
  // 暴露内容模板，供父组件调用渲染
  @ViewChild('tabContent') tabContent!: TemplateRef<any>;
}

app-tab.component.html #

<!-- 用ng-template暂存用户传入的内容，由父组件控制渲染时机 -->
<ng-template #tabContent>
  <ng-content></ng-content>
</ng-template>

2. 创建自定义TabGroup父组件（app-tab-group） #

该组件封装原生mat-tab-group，通过查询子组件动态生成标签组：

app-tab-group.component.ts #

import { Component, ContentChildren, QueryList, Input } from '@angular/core';
import { MatTabGroupModule } from '@angular/material/tabs';
import { AppTabComponent } from './app-tab.component';

@Component({
  selector: 'app-tab-group',
  standalone: true,
  imports: [MatTabGroupModule],
  templateUrl: './app-tab-group.component.html'
})
export class AppTabGroupComponent {
  // 透传原生组件的selectedIndex属性
  @Input() selectedIndex = 0;
  // 查询所有内容中的app-tab组件，QueryList会自动监听组件增删变化
  @ContentChildren(AppTabComponent) tabs!: QueryList<AppTabComponent>;
}

app-tab-group.component.html #

<mat-tab-group [selectedIndex]="selectedIndex">
  <!-- 遍历子组件，动态渲染每个mat-tab及对应内容 -->
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label">
    <ng-container [ngTemplateOutlet]="tab.tabContent"></ng-container>
  </mat-tab>
</mat-tab-group>

3. 使用封装后的组件 #

用法与原生mat-tab-group完全一致，支持动态添加/删除标签：

<app-tab-group [selectedIndex]="1">
  <app-tab label="First">Content 1</app-tab>
  <app-tab label="Second">Content 2</app-tab>
  <app-tab label="Third">Content 3</app-tab>
</app-tab-group>

核心逻辑说明 #

• @ContentChildren：用于查询组件内容区域内的所有指定子组件，返回的QueryList会自动监听子组件的变化，确保标签组能动态更新。
• ngTemplateOutlet：用于渲染预定义的ng-template内容，实现将用户传入的内容传递给原生mat-tab的效果。
• 属性透传：若需要支持原生mat-tab-group的其他属性（如backgroundColor、disablePagination等），只需在app-tab-group中添加对应@Input()属性，再绑定到原生组件即可。

内容的提问来源于stack exchange，提问作者Abduallah.M