如何將 mat-tab 的 tabindex 更改為 0

Question

在下面的代碼中，我有 3 個選項卡組。 當我使用 Tab 鍵從一個選項卡組切換到另一個選項卡組時，它是按順序排列的。 我想更改順序，因此將 tabindex 應用於 mat-tab，但它不起作用。 tabindex 沒有改變，它保持為 0。

Css：

.mat-tab-group {
  margin-bottom: 48px;
 }

HTML：

<mat-tab-group mat-align-tabs="start">
  <mat-tab tabindex="2" label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="center">
  <mat-tab tabindex="1" label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

<mat-tab-group mat-align-tabs="end">
  <mat-tab tabindex="3" label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>

查看鏈接： https://stackblitz.com/edit/angular-xtv9to?file=src%2Fapp%2Ftab-group-align-example.html

有一個參考tabIndex 在 mat-tab (Angular 7) 上不起作用，但這是我需要的答案。

Answer 1

也許這可以幫助你，它是一個監聽 tab 鍵事件然后按你需要的順序選擇下一個 mat-tab-group 的指令。 該代碼有一些注釋，因此您可以了解我在做什么。

@Directive({
  selector: "mtabindex"
})
export class TabDirective implements AfterViewInit {
  @ContentChildren(MatTabGroup) private groups: QueryList<MatTabGroup>;

  private tabGroups: { tabindex: number; node: any }[] = [];

  constructor(
    private container: ViewContainerRef,
    private cdr: ChangeDetectorRef
  ) {}

  /**
   * Creates an array of the tab groups with the attribute [tabindex]
   * Appends the node element and the tabindex number
   */
  ngAfterViewInit(): void {
    (this.container.element.nativeElement as HTMLElement).childNodes.forEach(
      (e: any & HTMLElement) => {
        const tabindex = e.attributes.getNamedItem("tabindex")!.value;
        this.tabGroups.push({
          tabindex,
          node: e
        });
      }
    );
  }

/**
 * Listen to the keydown events in mat-tab-groups
 */
  @HostListener("keydown", ["$event"])
  onTab($event: KeyboardEvent) {
    if ($event.code == "Tab") {
      
      const tabGroup: HTMLElement = this.getCurrentTabGroup($event);

      const currentGroup: number = Number(
        tabGroup.attributes.getNamedItem("tabindex")!.value
      );

      const nextTabGroup = this.getTabGroup(currentGroup);
      /**if there is a mat-tab-group then continue*/
      if (nextTabGroup.tabGroupIndex != -1) {
        $event.preventDefault();
        this.handleClick(nextTabGroup);
      }
    }
  }

/**
 * Returns the current mat-tab-group where the tab-key was pressed
 */
  private getCurrentTabGroup(event: Event): HTMLElement {
    return event
        .composedPath()
        .find(e =>
          (e as HTMLElement).classList.contains("mat-tab-group")
        ) as HTMLElement;
  }

/**
 * Creates an object with the element mat-tab-group and his current index
 */
  private getTabGroup(index: number): {tabGroup: any, tabGroupIndex: number} {
    return {
      tabGroup: this.tabGroups.find(e => e.tabindex >= index + 1)?.node,
      tabGroupIndex: this.tabGroups.findIndex(e => e.tabindex >= index + 1)
    };
  }

/**
 * Changes the selected index in the next mat-group and focus the mat-tab
 * The selected tab will be 0
 */
  private handleClick(nextTabGroup: {
    tabGroup: any;
    tabGroupIndex: number;
  }): void {
    this.groups.get(nextTabGroup.tabGroupIndex)!.selectedIndex = 0;
    nextTabGroup.tabGroup.children[0].children[1].children[0].children[0].children[0].focus();
    this.cdr.detectChanges();
  }
}

在您的 html 中，使用指令包裝所有 mat-tab-group 並放置 [tabindex] 屬性。

<mtabindex>
  <mat-tab-group [tabindex]="2" mat-align-tabs="start">
    <!-- #enddocregion align-start -->
    <mat-tab label="First1">Content 1</mat-tab>
    <mat-tab label="Second1">Content 2</mat-tab>
    <mat-tab label="Third1">Content 3</mat-tab>
  </mat-tab-group>

  <mat-tab-group [tabindex]="1" mat-align-tabs="center">
    <mat-tab label="First2">Content 1</mat-tab>
    <mat-tab label="Second2">Content 2</mat-tab>
    <mat-tab label="Third2">Content 3</mat-tab>
  </mat-tab-group>

  <mat-tab-group [tabindex]="3" mat-align-tabs="end">
    <mat-tab label="First3">Content 1</mat-tab>
    <mat-tab label="Second3">Content 2</mat-tab>
    <mat-tab label="Third3">Content 3</mat-tab>
  </mat-tab-group>
</mtabindex>

這只是一個想法，也許你可以改進這種方法。