使用 Angular Material 9 的 TAB 创建自定义组件时出错答案

【问题标题】：Error creating a custom component using TAB of Angular Material 9使用 Angular Material 9 的 TAB 创建自定义组件时出错
【发布时间】：2021-02-23 12:47:02
【问题描述】：

我正在尝试使用 Angular Material 9 创建一个 TAB 自定义组件。

这是使用 Angular Material 创建 TAB 的代码：

 <mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

我创建了两个新组件：

my-tab 带有以下 HTML：

 <mat-tab-group>
  <ng-container></ng-container>
</mat-tab-group>

my-tab-item 带有以下 HTML

 <mat-tab label="title">    
     <ng-container></ng-container>
   </mat-tab>

TAB 的文本有一个字符串参数。

问题是 TAB 没有被渲染。

<app-my-tab>
  <app-my-tab-item title="Label 1">Content 1</app-my-tab-item>
  <app-my-tab-item title="Label 2">Content 2</app-my-tab-item>
  <app-my-tab-item title="Label 3">Content 3</app-my-tab-item>
</app-my-tab>

我用这个例子创建了一个堆栈闪电战。

https://stackblitz.com/edit/angular-v9zpgf

感谢您的帮助

【问题讨论】：

标签： angular angular-material angular-components angular-material-9

【解决方案1】：

ng-container 不渲染任何内容，仅用于选择性地对元素进行分组。

在 my-tab.component.html 里放代码：

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

在 tab-group-basic-example.html 中删除 app-my-tab 的内容。简单地说：

<app-my-tab></app-my-tab>

您应该会看到您的组件呈现的选项卡。

【讨论】：

【解决方案2】：

我相信您正在尝试做的是内容投影。这是您需要做的：您的自定义选项卡组 (app-my-tab) 的 HTML 应该是这样的：

<mat-tab-group>
<ng-content select="app-my-tab-item"></ng-content>
<mat-tab-group>

你的 app-my-tab-item 的 HTML 应该是：

<mat-tab>
<ng-content></ng-content>
<mat-tab>

如果您需要传递一些自定义输入/输出元素，您可以适当地这样做。

【讨论】：