角材料 mat-tab-label

Question

我想从 selectedTabChange 事件访问序列的名称

<mat-tab-group (selectedTabChange)="onSequenceChangeEvent($event, sequence)">

<mat-tab  *ngFor="let sequence of sequencesForSelectedScope">

    <ng-template mat-tab-label>
        <span>{{sequence.sequenceName}}</span>
    </ng-template>

</mat-tab>

在这种情况下，我可以访问以下内容：sequenceEvent.tab.templateLabel.context，但此上下文未定义。我如何将其设置为例如sequence.sequenceName？

Answer 1

有一种方法可以做到这一点，但它有点麻烦。如果将“序列”数据分配给选项卡的“标签”输入，则可以从 MatTabChangeEvent 获取它。这仅适用于您使用模板标签，因此您可以“重新调整”标签输入的用途：

<mat-tab-group (selectedTabChange)="onSequenceChangeEvent($event)">

<mat-tab *ngFor="let sequence of sequencesForSelectedScope" [label]="sequence">

    <ng-template mat-tab-label>
        <span>{{sequence.sequenceName}}</span>
    </ng-template>

</mat-tab>

onSequenceChangeEvent(event: MatTabChangeEvent) {
  console.log(event.tab.textLabel.sequenceName);
}