如何在 angular 8 的 mat-tab 中選擇上一個選定的選項卡

Question

有數據列表，當用戶單擊第一行然后顯示具有許多選項卡的詳細信息時，默認情況下始終顯示選項卡“ProductInformation”。 如果用戶選擇列表中的另一行，請始終記住並顯示最后一個列表項的最后選擇的選項卡 例外：如果新選擇的項沒有與最后一項中最后顯示的選項卡相同，則切換到第一個標簽

下面是我嘗試做的相同代碼，但它的工作正常，因為“在重新加載詳細信息視圖后切換到先前選擇的選項卡”，但目標行為：最初選擇加載選項卡（之后不切換。

請讓我知道我如何按照目標行為做。

在 HTML 中：

<mat-tab-group class="tab-group" #tabGroup (focusChange)="tabChanged($event)" [(selectedIndex)]="selectedTabIndex">
    <mat-tab label="ProductInformation">
      <div class="tab-content">
        ...........
      </div>
    </mat-tab>
    <mat-tab label="StocksInformation">
      <div class="tab-content">
        ...........
      </div>
    </mat-tab>
    <mat-tab label="SpareInformation">
      <div class="tab-content">
        ...........
      </div>
    </mat-tab>
  </mat-tab-group>

在 ts 文件中：

selectedTabIndex: number = 0;
@ViewChild('tabGroup', null) private tabGroup: MatTabGroup;

ngAfterViewInit() {
    setTimeout(() => {
      this.selectedTabIndex = this.utils.activeTabSession("activeTabDetail", this.tabGroup, this.selectedTabIndex);
    });
  }


activeTabSession(sessionKeyName: string, tabGroup: MatTabGroup, selectedTabIndex: number): number {
    var activeTabDetail = JSON.parse(sessionStorage.getItem(sessionKeyName));
    if (activeTabDetail != null && activeTabDetail != undefined) {
      selectedTabIndex = 0;
      tabGroup._tabs.forEach(element => {
        if (element.textLabel == activeTabDetail.tabName) {
          selectedTabIndex = element.position;
        }
      });
      if(selectedTabIndex == 0) {
        var tabDetails = {tabIndex: tabGroup._tabs.first.position, tabName: '' + tabGroup._tabs.first.textLabel + ''};
        sessionStorage.setItem(sessionKeyName, JSON.stringify(tabDetails));
      }
    }
    return selectedTabIndex;
  }

Answer 1

您已經擁有該物業

selectedTabIndex: number = 0;

每個屬性也可以寫成 get 和 set 的組合。

private _selectedTabIndex: number = 0;
get selectedTabIndex() {
  return this._selectedTabIndex;
}
set selectedTabIndex(value: number) {
  this._selectedTabIndex = value;
}

您可以通過不公開集合的第二個屬性非常輕松地擴展替代變體。

private _selectedTabIndex: number = 0;
private _previousSelectedTabIndex: number = 0;
get selectedTabIndex() {
  return this._selectedTabIndex;
}
set selectedTabIndex(value: number) {
  this._previousSelectedTabIndex = this._selectedTabIndex;
  this._selectedTabIndex = value;
}
get previousSelectedTabIndex() {
  return this._previousSelectedTabIndex;
}

當請求將選項卡更改為前一個時，您可以通過說this.selectedTabIndex = this._previousSelectedTabIndex來使用_previousSelectedTabIndex屬性。

Answer 2

您可以將信息存儲在瀏覽器中。

handleMatTabChange(event: MatTabChangeEvent) {
        localStorage.setItem('userTabLocation', event.index);
    }

在頁面加載時，從本地存儲獲取信息並設置選項卡。

ngAfterViewInit() {
    let index = localStorage.getItem('userTabLocation') || 0;     this.tabGroup.selectedIndex = index; 
}