Angular 材料标签 isActive

Question

我正在尝试使用 angular 材料中的标签（ https://material.angular.io/components/tabs/api ）

DOC指定有一个ISACTIVE属性，但我不知道如何使用它，我该如何更改图像（当Tab处于活动状态时）我在我的范围内做错了什么？

<mat-tab label="all" isActive="iconAllOn=true">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn=true" (mouseout)="iconAllOn=false">
            <img class="logoNavBar" *ngIf="!iconAllOn" [src]="imagePathAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn" [src]="imagePathAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>

Answer 1

isActive不是@Input属性，您不能为其设置值。 检查以下示例，此处使用表单字段设置活动选项卡。 https://stackblitz.com/angular/dgkalqaqdlv?file=src%2Fapp%2Ftab-group-dynamic-example.ts

MatTabGroup支持设置选中的索引。 API

你想在 mouseHover 上设置一些样式吗？ 活动标签样式可以以不同的方式完成

这是一个例子：

https://stackblitz.com/angular/mkjxrrgbdak?file=src%2Fstyles.scss

我添加了基本样式，这不是设置标签样式的正确方法，但可以实现。

Answer 2

这里有点晚了，但是您可以执行以下操作。 不完全确定您希望它如何表现。

<mat-tab #allTab label="all">
    <ng-template mat-tab-label>
        <div (mouseover)="iconAllOn = true" (mouseout)="iconAllOn = false">
            <img class="logoNavBar" *ngIf="!iconAllOn || !allTab.isActive" [src]="imagePathAllOff">
            <img class="logoNavBar" *ngIf="iconAllOn || allTab.isActive" [src]="imagePathAllOn">
        </div>
    </ng-template> 
    Content 1
</mat-tab>