如何以编程方式获取 mat-tab-group 的选定索引

Question

我有一个具有两个mat-tab-group的mat-tab-group。当用户点击提交，我试图找出哪个选项卡被选中。我怎么做呢?

在我的submit方法中，我想要抓取正确的选项卡，这样我就知道从哪个输入字段读取。我试着在Angular 2材料中使用mat-tab-group以编程方式选择mat-tab，但这个问题问的是不同的东西，我不知道如何使这个问题适应我的。

<mat-tab-group mat-align-tabs="center">
<mat-tab label="Pre-selected Options">
<mat-card-content>
<div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutGap="20px" class="fnol-min-widht50">
<div style="  width: 40%;">
<div *ngIf="!hidden" [ngClass]="[routeAnimationsElements,'add-marging-bottom40']">
<mat-form-field>
<mat-select placeholder="Vested Options" formControlName="vestedoptions" [id]="vestedoptions" mask="" thousandSeparator="">
<mat-option selected></mat-option>
<mat-option [value]="1">
A MARRIED MAN, AS HIS SOLE AND SEPARATE PROPERTY
</mat-option>
<mat-option [value]="2">
A MARRIED WOMAN AND A MARRIED MAN
</mat-option>
<mat-option [value]="3">
A MARRIED WOMAN, AS HER SOLE AND SEPARATE PROPERTY
</mat-option>
<mat-option [value]="4">
A MARRIED WOMAN/MAN AS HER/HIS SOLE AND SEP PROP
</mat-option>
<mat-option [value]="5">
A SINGLE MAN
</mat-option>
<mat-option [value]="6">
A SINGLE MAN AND A SINGLE WOMAN AS JOINT TENANTS
</mat-option>
<mat-option [value]="7">
A SINGLE PERSON
</mat-option>
<mat-option [value]="8">
A SINGLE WOMAN
</mat-option>
<mat-option [value]="9">
A WIDOW
</mat-option>
<mat-option [value]="10">
A WIDOWER
</mat-option>
<mat-option [value]="11">
AN UNMARRIED MAN
</mat-option>
<mat-option [value]="12">
AN UNMARRIED WOMAN
</mat-option>
<mat-option [value]="13">
HUSBAND && WIFE AS COM PROP WITH RIGHT OF SURVIVOR
</mat-option>
<mat-option [value]="14">
HUSBAND AND WIFE AS JOINT TENANTS
</mat-option>
</mat-select>
</mat-form-field>
</div>
</div>
</div>
</mat-card-content>
</mat-tab>
<mat-tab label="Pre-selected Options">
<mat-card-content>
<div [ngClass]="[routeAnimationsElements,'add-marging-bottom40']">
<mat-form-field>
<input matInput #input class="uppercase" placeholder="Free Text" formControlName="freetext">
<mat-error *ngIf="!isFreeTextValid">{{this.freeTextErrorMessage}}</mat-error>
</mat-form-field>
</div>
</mat-card-content>
</mat-tab>
</mat-tab-group>

Answer 1

您有不同的选项，MatTabGroup有两个事件selectedIndexChange和selectedTabChange，每次选项卡更改时都会触发，因此您可以记住当前选项卡或选项卡索引。一旦你提交了，你就知道了。

这里有一个简单的例子:

<mat-tab-group mat-align-tabs="center" (selectedIndexChange)="onSelectedIndexChange($event)" (selectedTabChange)="onSelectedTabChange($event)">
<mat-tab label="Pre-selected Options 1">

</mat-tab>
<mat-tab label="Pre-selected Options 2">

</mat-tab>
</mat-tab-group>
<button (click)="onSubmit()">Submit</button>

和代码:

export class AppComponent  {
private currentTabIndex = 0;
public onSelectedIndexChange(tabIndex: number) {
this.currentTabIndex = tabIndex;
console.log(`Selected Tab Index: ${tabIndex}`);
}
public onSelectedTabChange(matTabChangeEvent: MatTabChangeEvent)  {
console.log(matTabChangeEvent.tab.textLabel);
}
public onSubmit() {
console.log(this.currentTabIndex);
}
}

另一个选择是直接使用ViewChild获取mat组，然后在提交时从它读取索引。下面是这个示例的代码，模板可以是相同的，只是没有事件。

export class AppComponent  {
@ViewChild(MatTabGroup) matTabGroup: MatTabGroup;
public onSubmit() {
console.log(this.matTabGroup.selectedIndex);
}
}

这里还有一个StackBlitz的链接，其中包括两个实现。