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

【问题标题】：Prevent user from navigating to other tab using mat-tab-group, without VIewChild防止用户在没有 VIewChild 的情况下使用 mat-tab-group 导航到其他选项卡
【发布时间】：2020-02-12 01:30:00
【问题描述】：

我有这个垫子组：

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 的选项卡上。我试过这样，但没有工作。你能给我一些想法吗？谢谢

【问题讨论】：

标签： angular typescript angular-material angular7 angular8

【解决方案1】：

您需要在selectedIndex 上启用双向绑定：

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

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

【讨论】：

正在工作，但如果我点击第二个选项卡，显示选项卡 2 并快速传递到选项卡 1，是否可以停止此快速移动？
也许 - 但隐藏/显示内容会是技巧 - 可能类似于 <mat-tab label="First"><div [ngStyle]="{'display': selectedProjectIndex === 0 ? 'block' : 'none'}"> Content 1 </div></mat-tab>。我更新了我的堆栈闪电战。

【解决方案2】：

只是禁用不应被允许导航的组件/选项卡？

https://material.angular.io/components/tabs/examples - “标签导航栏的基本使用” - “禁用链接”

【讨论】：

我不想禁用一个选项卡，我只想留在选项卡 1，如果用户点击选项卡 2 或 3 会显示一个弹出窗口

【解决方案3】：

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

【讨论】：