时间戳

首页 > 解决方案 > 使用 Angular Material 9 的 TAB 创建自定义组件时出错

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

问题描述

我正在尝试使用 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>

我创建了两个新组件：

带有以下 HTML 的my-tab ：

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

带有以下 HTML 的my-tab-item

 <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

谢谢你的帮助

标签： angularangular-materialangular-componentsangular-material-9

解决方案

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>

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

推荐阅读