Question

我想有条件地阻止用户导航到mat-tab-group中的其他选项卡。我在这里How to conditionally prevent user from navigating to other tab in mat-tab-group找到了一只猴子在打补丁。但是我想使用mat-tab-group API来实现这一点。我可以使用focusChange事件或event.preventDefault或任何其他方式实现此功能。

以下是示例https://stackblitz.com/edit/angular-mat-tab-focuschange-tphyvw

Answer 1

通过使用@Output() selectedIndexChange: EventEmitter<number>捕获制表符更改尝试并使用@Input() selectedIndex: number | null设置活动的制表符（如果您不希望选择新索引，则设置为当前的制表符索引）很容易实现< / p>

<mat-tab-group #mtg (selectedIndexChange)="selectedIndexChange($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group>

  @ViewChild("mtg") tg: MatTabGroup;
  tabs = ['First', 'Second', 'Third', "Fourth"];
  current = 0;

  selectedIndexChange(evt: any) {
    if (evt % 2) {
      this.tg.selectedIndex = this.current;
      console.log("You cannot select even numbered tabs, sorry ^_^");
    } else {
      this.current = evt;
    }
  }

这是工作中的demo

Answer 2

如果要有条件地阻止用户移动到特定选项卡，则可以根据此条件禁用该选项卡。让用户单击该标签，然后以某种方式尝试阻止它，对我来说似乎不是一个好的解决方案。

假设您要禁用索引为1的标签：

<mat-tab-group (focusChange)="show()" [selectedIndex]="selected.value"
               (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab" [disabled]="index === 1">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group>

理想情况下，您将为选项卡定义一个界面，添加一个属性（例如disabled），然后根据该属性设置选项卡的disabled状态。这使您可以轻松地启用/禁用选项卡。

使用mat-tab-group focusChange事件，如何停止用户导航到其他选项卡

2 个答案: