如果使用ng-container，则在mat-tab中添加tootip

Question

如果我使用ng-container，我在mat-tab中添加tootip时会遇到问题。

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

Answer 1

我自己想办法。我必须在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>

Answer 2

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