Angular 材质选项卡 isActive答案

【问题标题】：Angular material tabs isActiveAngular 材质选项卡 isActive
【发布时间】：2021-01-18 22:42:48
【问题描述】：

我正在尝试使用 Angular 材质的标签 (https://material.angular.io/components/tabs/api)

doc指定有一个isactive属性，但我不知道如何使用它，如何更改映像（当标签处于活动状态时）我在我的expple中做错了什么？

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

【问题讨论】：

标签： angular angular-material

【解决方案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

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

【讨论】：

是的，如果选项卡处于活动状态且鼠标悬停，我正在尝试更改图标颜色（当前为 2 个图标，我正在等待 svg）
如果你有什么建议就好了

【解决方案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>

【讨论】：