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

2023-12-28

我想有条件地阻止用户导航到 mat-tab-group 中的其他选项卡。我发现一只猴子在这里打补丁如何有条件地阻止用户导航到 mat-tab-group 中的其他选项卡 https://stackoverflow.com/questions/51354135/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 https://stackblitz.com/edit/angular-mat-tab-focuschange-tphyvw


它很容易通过使用来实现@Output() selectedIndexChange: EventEmitter<number>捕获选项卡更改尝试并使用@Input() selectedIndex: number | null设置活动选项卡(如果您不希望选择新索引,则设置为当前选项卡索引)

<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 https://stackblitz.com/edit/angular-mat-tab-focuschange-gwx1rw

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 mat-tab-group focusChange 事件,如何阻止用户导航到其他选项卡 的相关文章

随机推荐