如果使用 ng-container，在 mat-tab 中添加工具提示

Question

如果我使用 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>

我试过了。它不工作。不同的是我这里用的是ng-container.

Answer 1

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

中的 div

Answer 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>

如果使用 ng-container，在 mat-tab 中添加工具提示

add tootip in mat-tab if using ng-container

angular

angular-material

mat-tab

ng-container