如何使用角材料保留選項卡狀態？

Question

我正在使用 angular 8 和 angular 材料。 我有四個選項卡，您可以在每個選項卡中進行編輯，但是如果您從編輯返回選項卡，則必須選擇上次選擇的選項卡。

我像這樣嘗試：

export class UIStateService {
  private state: UIState;

  constructor() {}

  setState(state: UIState) {
    this.state = state;
  }

  getState(): UIState {
    return this.state ? this.state : { tabState: 1};
  }
}

export interface UIState {
  tabState: number;
}

並在組件中：

ngOnInit(): void {
   const state = this.uiStateService.getState();
   this.setTabState(state.tabState);

  }


  setTabState(tabId: number) {

  }

  getCurrentTabState(): number {

    return 1;
  }

視圖如下所示：

 <mat-tab-group>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="interviews">speaker_notes</mat-icon>
          <span i18n>Interview reports</span>{{ dossierItemsCountString(itemTypes.Interview) }}
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Interview }"></ng-container>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="notes">note</mat-icon>
          <span i18n>Notes</span>{{ dossierItemsCountString(itemTypes.Note) }}
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Note }"></ng-container>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="goals">grade</mat-icon>
          <span i18n>Goals</span>{{ dossierItemsCountString(itemTypes.Goal) }}
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.Goal }"></ng-container>
      </mat-tab>
      <mat-tab>
        <ng-template mat-tab-label>
          <mat-icon class="action-steps">list</mat-icon>
          <span i18n>Action steps</span>{{ dossierItemsCountString(itemTypes.ActionStep) }}
        </ng-template>
        <ng-container *ngTemplateOutlet="itemList; context: { itemType: itemTypes.ActionStep }"></ng-container>
      </mat-tab>
    </mat-tab-group>

那我必須改變什么？ 謝謝

Answer 1

可以使用 mat-tab-group 的selectedIndex屬性設置活動選項卡。

首先，您需要將默認 tabState 保存為 0，它指向第一個選項卡。 然后，當用戶更改選項卡時，更新 tabState。

<mat-tab-group [selectedIndex]="selectedTab"
           (selectedIndexChange)="setTabState($event)">
      ...
</mat-tab-group>

現在，在組件中的 ngOnInit 中獲取保存的狀態：

export class YourComponent implements ngOnInit {
    selectedTab: number = 0;

    ngOnInit(): void {
       const state = this.uiStateService.getState();
       if (state) {
           this.selectedTab = state.tabState || 0; // Set to 0 if tabState not present
       }
    }

    setTabState(tabId: number): void {
       this.selectedTab = tabId;
       this.uiStateService.setState({tabState: tabId});
    }
}

希望能幫助到你。

Answer 2

您可以嘗試使用 [selectedIndex]。 這是 mat-tab-group 的屬性。 您可以將選項卡索引保存在一個變量中並將其綁定到 selectedIndex 屬性。 希望這會奏效。