使用 ng-container 在 mat-tab id 中添加工具提示答案

【问题标题】：add tootip in mat-tab if using ng-container使用 ng-container 在 mat-tab id 中添加工具提示
【发布时间】：2021-10-25 14:24:15
【问题描述】：

如果我使用 ng-container，我无法在 mat-tab 中添加提示。

<mat-tab-group>
    <mat-tab label="Users" >
        <ng-container *ngTemplateOutlet="users"></ng-container>
    </mat-tab>
    <mat-tab label="Cars">
        <ng-container *ngTemplateOutlet="cars"></ng-container>
    </mat-tab>
</mat-tab-group>
<ng-template #users>
    <div>many users</div>
</ng-template>
<ng-template #cars>
    <div>many cars</div>
</ng-template>

我试过Attach tooltip on mat-tab label。它不工作。不同的是这里我使用ng-container。

【问题讨论】：

标签： angular angular-material mat-tab ng-container

【解决方案1】：

您不能向ng-container 添加工具提示，因为它呈现为comment。因此，您需要将ng-container 更改为div/span，或将工具提示附加到ng-template 内的div。

【讨论】：

我可以将工具提示附加到 ng-template 中的 div。但是工具提示不在选项卡周围。

【解决方案2】：

自己想办法。我必须在ng-container 上方添加一个额外的ng-template。

<mat-tab-group>
    <mat-tab label="Users" >
        <ng-template mat-tab-label>
           <label matTooltip="See users">Users  
           </label>
        </ng-template>
        <ng-container *ngTemplateOutlet="users"></ng-container>
    </mat-tab>
    <mat-tab label="Cars">
        <ng-template mat-tab-label>
            <label matTooltip="See cars">Users  
            </label>
        </ng-template>
        <ng-container *ngTemplateOutlet="cars"></ng-container>
    </mat-tab>
</mat-tab-group>
<ng-template #users>
    <div>many users</div>
</ng-template>
<ng-template #cars>
    <div>many cars</div>
</ng-template>

【讨论】：