Angular Material 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);
}