防止用户在没有 VIewChild 的情况下使用 mat-tab-group 导航到其他选项卡

Question

我有这个 mat-tab-group :

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')
        );
    }
}

在这个 mat-tab-group 中，我有 3 个选项卡，我想停止导航到索引 = 1,2 的选项卡，始终保持在索引 = 0 的选项卡处。我这样试过，但没有用。你能给我一些想法吗？感谢

Answer 1

只是禁用不应允许导航的components/tabs？

https://material.angular.io/components/tabs/examples - "Basic use of the tab nav bar" - "disabled link"

Answer 2

您是否尝试将 [disabled]='true' 添加到您要禁用的 mat-tab 中？也许你甚至可以添加一个条件：[disabled]='isFirstTab' 或类似的东西。

Answer 3

您需要在 selectedIndex:

上启用双向绑定

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

Stackblitz 示例：https://stackblitz.com/edit/angular-lkhtgt。

防止用户在没有 VIewChild 的情况下使用 mat-tab-group 导航到其他选项卡

Prevent user from navigating to other tab using mat-tab-group, without VIewChild

typescript

angular-material

angular

angular7

angular8