Использование события focusChange группы mat-tab-group, Как остановить переход пользователя на другую вкладку

Question

Я хочу условно запретить пользователю переходить на другую вкладку в mat-tab-group. Я обнаружил здесь одно исправление обезьяны Как условно запретить пользователю переходить на другую вкладку в 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 для установки активной вкладки (и установки на индекс текущей вкладки, если вы не хотите, чтобы новый индекс выбирался)

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

вот рабочая демо

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 вкладки. Это позволяет вам легко включать / отключать вкладку.