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

我尝试在 mat-tab label 上附加工具提示。它不工作。不同的是这里我使用ng-container.

Answer 1

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

<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，或将工具提示附加div到ng-template.