Как сохранить состояние вкладки с анугларным материалом?

Question

Я использую angular 8 и angular материал. И у меня есть четыре вкладки, и на каждой вкладке вы можете выполнить редактирование, но если вы go вернулись от редактирования к вкладкам, необходимо выбрать вкладку, которая была выбрана.

Я пытаюсь сделать это следующим образом :

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

Активную вкладку можно установить с помощью атрибута selectedIndex группы mat-tab-group.

Сначала необходимо сохранить значение по умолчанию 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. Надеюсь, это сработает.