0

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

谢谢你的帮助

4

2 回答 2

0

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>

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

于 2020-11-15T15:45:05.740 回答
0

我相信您正在尝试做的是内容投影。这是您需要做的：您的自定义选项卡组（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>

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

于 2020-11-15T16:05:27.880 回答