帶有材質選項卡的 Angular 8 - 在重新加載時選擇最后一個活動選項卡

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>

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

Answer 2

我建議將最后一個 tabIndex 存儲在 localStorage 中。

更新 tabIndex 以引用 localStorage 中最后保存的索引。 因此，當頁面刷新或返回時，它會顯示最后顯示的選項卡。