Angular MatTab: запомнить выбранную вкладку
Я новичок в Angular, и я хочу, чтобы мой код запомнил, на какой вкладке я был, даже после того, как я обновлю страницу или перейду на другую страницу, а затем вернусь. Итак, если бы я был на tab2 и обновил браузер, я хочу, чтобы страница снова загружала tab2 и не возвращалась к tab1, как это по умолчанию с вкладками angular материала. Как бы я этого добился? Спасибо!
Я работаю с группой 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>
«...» - это просто атрибуты таблицы.
Ответы 1
Единственный способ хранить информацию на стороне клиента, которая сохраняется после уничтожения страницы, - это локальное хранилище. Вы можете сохранить информацию в браузере следующим образом:
handleMatTabChange(event: MatTabChangeEvent) {
localStorage.setItem('userTabLocation', event.index);
}
... с этим событием, привязанным к событию MatTabGroup'sselectedIndexChange. Затем при загрузке страницы получите информацию из локального хранилища и установите вкладку:
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 здесь.