Angular MatTab：記住選定的選項卡

Question

我對 Angular 還是很陌生，我希望我的代碼即使在刷新頁面或轉到另一個頁面然后返回后也能記住我在哪個選項卡上。 因此，如果我在 tab2 上並刷新瀏覽器，我希望頁面再次加載 tab2，而不是像使用角度材質選項卡的默認設置那樣返回 tab1。 我將如何做到這一點？ 謝謝！

我正在使用如下所示的 mat-tab-group：

<mat-tab-group>
    <mat-tab label="Table1">
        ...
    </mat-tab>
    <mat-tab label="Table2">
        ...
    </mat-tab>
    <mat-tab label="Table3">
        ...
    </mat-tab>
</mat-tab-group>

“...”只是表屬性。

Answer 1

在頁面銷毀后，客戶端存儲信息的唯一方法是使用本地存儲。 您可以將信息存儲在瀏覽器中，如下所示：

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

...該事件綁定到MatTabGroup的selectedIndexChange事件。 然后，在頁面加載時，從本地存儲獲取信息並設置選項卡：

ngAfterViewInit() {
    let index = localStorage.getItem('userTabLocation') || 0; // get stored number or zero if there is nothing stored
    this.tabGroup.selectedIndex = index; // with tabGroup being the MatTabGroup accessed through ViewChild
}

然而...

我認為更好的解決方案是將當前選項卡綁定到Router ，並使每個選項卡都在自己的路由中。 這意味着標簽本身就像它們自己的頁面一樣，並且會通過正常的瀏覽器交互（刷新、后退、前進等）按照您的預期運行，並且您可以超鏈接到特定標簽。

這樣做非常簡單。 您只需使用<mat-tab-nav-bar>和<mat-tab-link>而不是組和選項卡。 此功能的文檔位於此處的 API 站點上。