[英]add tootip in mat-tab if using ng-container
I have issues to add tootip in mat-tab if I use ng-container.如果我使用 ng-container,我有问题要在 mat-tab 中添加 totip。
<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>
I tried Attach tooltip on mat-tab label .我尝试在 mat-tab label 上附加工具提示。 It is not working.
它不工作。 The difference is that here I use
ng-container
.不同之处在于我在这里使用
ng-container
。
You can't add tooltips to ng-container
, because it renders as a comment
.您不能向
ng-container
添加工具提示,因为它呈现为comment
。 So you need to change ng-container
to some div
/ span
, or attach tooltip to the div
inside your ng-template
.因此,您需要将
ng-container
更改为某个div
/ span
,或者将工具提示附加到ng-template
内的div
。
Figure it out by myself.自己想办法。 I have to add an additional
ng-template
above ng-container
.我必须在
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.