Angular MatTab: запомнить выбранную вкладку

Question

Я довольно новичок в Angular, и я хочу, чтобы мой код запоминал, на какой вкладке я находился, даже после того, как я обновил страницу или перешел на другую страницу, а затем вернулся.Поэтому, если я был на вкладке 2 и обновил браузер, я хочу, чтобы страница снова загружала вкладку 2, а не возвращался на вкладку 1, как по умолчанию для угловых вкладок материала.Как бы я это сделал?Спасибо!

Я работаю с группой вкладок mat, которая выглядит примерно так:

<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 здесь .