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

Question

使用以下示例：

例子

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

谢谢

标签： angularangular-router

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>

其中 tabs 是具有适当属性名称的对象数组。

编辑：

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

我为此遵循的一般模式是：

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

零件

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>