Question

我想将matTooltip附加到禁用的mat-tab中的mat-icon但是...当禁用mat-tab时，似乎禁用了此功能。有人有同样的问题吗？

（我当然不能将mat-tab放在div中）

谢谢。

<mat-tab label="Tab 3" [disabled]="!picExist" >
    <ng-template mat-tab-label>
    <mat-icon *ngIf="picExist" matTooltip="See Pictures">photo_camera</mat-icon>
    <mat-icon *ngIf="!picExist" matTooltip="No picture!">add_a_photo</mat-icon>
    </ng-template>
    <div>The content</div>
</mat-tab>

Answer 1

如果您想在 mat-tab 标签中使用禁用的 matTooltip，您不能直接使用

<mat-tab label="Pictures" matTooltip="See Pictures" disabled>

第一步：你需要把标签拿出来：

<mat-tab disabled>
   <ng-template mat-tab-label>
      Pictures
   </ng-template>
</mat-tab>

第二步：您需要一个 HTML 元素，因为 ng-template 不是 DOM 对象，而 matTooltip 需要一个：

<mat-tab disabled>
   <ng-template mat-tab-label>
      <div matTooltip="See Pictures">
         Pictures
      </div>
   </ng-template>
</mat-tab>

如何将matTooltip附加到禁用的mat-tab？

1 个答案: