Angular 带材质选项卡的角度8-选择重新加载时的最后一个活动选项卡

使用以下示例：

重新加载页面时，如何激活上次选择的选项卡？有没有这样的设计模式

---

谢谢

这是一个简单、朴素的硬编码版本：

<mat-tab-group [selectedIndex]="1">
  <mat-tab label="system" routerLink="syspref"> Default Preferences </mat-tab>
  <mat-tab label="user" routerLink="userpref"> User Preferences </mat-tab>
</mat-tab-group>

默认首选项
用户偏好

为了使它更通用，您需要有一些编程方式来知道您有多少选项卡。例如，如果您是从阵列构建选项卡

<mat-tab-group [selectedIndex]="tabs.length - 1">
  <mat-tab *ngFor="let tab of tabs" [label]="tab.label" [routerLink]="tab.link">{{tab.name}}</mat-tab>
</mat-tab-group>

{{tab.name}

其中，选项卡是具有适当属性名称的对象数组

编辑：

您希望在页面重新加载期间保留活动选项卡

我在这方面遵循的一般模式是：

在更改选项卡时，将索引添加到查询参数

在页面加载时，在查询参数中查找索引

如果有效，请设置活动选项卡索引

组件

constructor(private route: ActivatedRoute,
  private router: Router) {}

selectedTabIndex: number;

ngOnInit(): void {
  this.selectedTabIndex = parseInt(this.route.snapshot.queryParamMap.get('tab'), 10);
  // TODO: check upper bound. Material will set the last tab as selected
  // if selectedTabIndex >= number of tabs
  if (isNaN(this.selectedTabIndex) || this.selectedTabIndex < 0) {
    this.selectedTabIndex = 0;
  }
}

onTabChange(selectedTabIndex: number): void {
  this.router.navigate([], { relativeTo: this.route, queryParams: {
    tab: selectedTabIndex
  }});
  this.selectedTabIndex = selectedTabIndex;
}

构造函数（专用路由：ActivatedRoute，
专用路由器：路由器{}
selectedTabIndex：数字；
ngOnInit（）：void{
this.selectedTabIndex=parseInt（this.route.snapshot.queryParamMap.get（'tab'），10）；
//TODO:检查上限。物料将最后一个选项卡设置为选中
//如果选择Tabindex>=选项卡数
如果（isNaN（this.selectedTabIndex）| this.selectedTabIndex<0）{
此参数。selectedTabIndex=0；
}
}
onTabChange（selectedTabIndex:number）：无效{
this.router.navigate（[]，{relativeTo:this.route，queryParams:{
选项卡：已选择的选项卡索引
}});
this.selectedTabIndex=selectedTabIndex；
}

html

<mat-tab-group [selectedIndex]="selectedTabIndex" 
  (selectedIndexChange)="onTabChange($event)">
  <mat-tab label="system" routerLink="syspref"> Default Preferences </mat-tab>
  <mat-tab label="user" routerLink="userpref"> User Preferences </mat-tab>
</mat-tab-group>

默认首选项
用户偏好

我建议将最后一个tabIndex存储在localStorage中

更新tabIndex以引用上次从localStorage保存的索引。

---

因此，当页面刷新或返回时，它将显示最后显示的选项卡。

我想我还不太清楚我在问什么。我指的是最后一个选中的选项卡。重新加载页面之前选择的选项卡。啊，这完全不同：）我将更新我的答案我正在查看您的代码，但想问这个问题。我有一个材质工具栏，当我重新加载页面时，工具栏上最后一个选定的项目会自动导航到并高亮显示。但是，选项卡被正确导航，但没有突出显示。我实际上不知道材质，所以不确定它还需要什么。您能否更新stackblitz以进行演示。它正在工作，但在地址栏中显示此/settings/syspref？tab=0。是这样吗？