angular - Mat-tab-group 角度组件选项卡自行切换选项卡

Question

我有一个用户报告说，当他们在数据仍在加载时不断在选项卡之间切换（每个选项卡单独的 API 调用）时，选项卡将开始自行切换，用户必须刷新页面才能重新获得控制权。

https://streamable.com/nu5l2s

我尝试禁用动画，但问题仍然存在。我尝试禁用/延迟选项卡切换，直到每个选项卡完成加载数据，但我想知道是否有更好的方法，同时仍允许用户在选项卡之间切换。

这是带有一个选项卡的代码片段。每个选项卡都有相同的逻辑

<mat-tab-group [@.disabled]="StopTabSwitchingAnimation" color="accent" class="demo-tab-group" [selectedIndex]="TabStateHelper.ConversationsListTabSelectedIndex" (selectedTabChange)="tabChanged($event)">
  <mat-tab>
    <ng-template mat-tab-label>
      Active &nbsp;<span *ngIf="TotalActiveConversationCount" class="tab-message-count">{{TotalActiveConversationCount}}</span>
    </ng-template>
    <ng-template matTabContent>
        <div class="demo-tab-content" infiniteScroll [infiniteScrollDistance]="0.7" [infiniteScrollThrottle]="100" (scrolled)="onScrollDown()"
                [scrollWindow]="false">
            <app-all-conversations [Conversations]="Conversations"></app-all-conversations>
            <div *ngIf="LoadingActiveConversations" class="loading-conversations">
                <mat-sourcing-spinner [IsSpinnerActive]="LoadingActiveConversations" [IsLoadingList]="true"></mat-sourcing-spinner>
            </div>
        </div>
    </ng-template>
  </mat-tab>

....

</mat-tab-group>

constructor(private _conversationService: ConversationService,
    private _authService: AuthenticationService) {
    this.TabStateHelper = TabStateHelper.Instance;
  }

public tabChanged(event: MatTabChangeEvent): void {
    this.TabStateHelper.ConversationsListTabSelectedIndex = event.index;
  }