Запретить пользователю переход на другую вкладку с помощью mat-tab-group без VIewChild

Question

У меня есть эта группа вкладок матов:

mat-tab-group
    class="brand-tabs"
    [disableRipple]="true"
    *ngSwitchCase="types.project"
    (selectedTabChange)="changeProjectTab($event)"
    [selectedIndex]="selectedProjectIndex"
>
.........

Функция в ts:

changeProjectTab(event) {
    if (event.index > 0) {
        this.selectedProjectIndex = 0;
        this.modalService.contentModal(
            this.upgradeRef,
            this.translateService.instant('message')
        );
    }
}

В этой группе вкладок матов у меня есть 3 вкладки, и я хочу чтобы остановить навигацию к вкладке с индексом = 1,2, оставаясь всегда на вкладке с индексом = 0. Я пытался так, но не работает. Можете ли вы дать мне несколько идей, пожалуйста? Thx

Answer 1

Необходимо включить двустороннюю привязку для selectedIndex:

<mat-tab-group
    ...
    (selectedTabChange)="changeProjectTab($event)"
    [(selectedIndex)]="selectedProjectIndex"
>

Пример Stackblitz: https://stackblitz.com/edit/angular-lkhtgt.

Answer 2

Вы пытались добавить [disabled] = 'true' на вкладку mat, которую хотите отключить? Может быть, вы даже можете добавить условие: [disabled] = 'isFirstTab' или что-то в этом роде.

Answer 3

Просто отключить компоненты / вкладки, на которые нельзя разрешить навигацию?

https://material.angular.io/components/tabs/examples - «Основы c использование панели навигации вкладок» - «отключенная ссылка»