如何在角度8的mat-tab中选择上一个选定的选项卡

如何解决如何在角度8的mat-tab中选择上一个选定的选项卡

有数据列表，当用户单击第一行然后显示带有许多选项卡的详细信息时，始终显示默认情况下选中的“ 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;
  }

解决方法

您已经拥有该财产

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;
}

当请求将选项卡更改为上一个选项时，只需说出_previousSelectedTabIndex即可使用this.selectedTabIndex = this._previousSelectedTabIndex属性。

,

您可以将信息存储在浏览器中。

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

在页面加载时，从本地存储获取信息并设置标签。

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