Question

使用以下示例：

重新加载页面后，如何激活最后选择的标签？有这样做的设计模式吗？

谢谢

Answer 1

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

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

选项卡是带有适当属性名称的对象数组。

编辑：

您要在页面重新加载期间保留活动标签。

我遵循的一般模式是：

在选项卡更改中，将索引添加到查询参数
在页面加载时，在查询参数中找到索引
如果有效，请设置活动标签页索引

组件

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

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>

Answer 2

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

更新tabIndex以引用localStorage中最后保存的索引。因此，当页面刷新或返回时，它将显示最后显示的标签。

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

2 个答案: