如何将mat-tab的tabindex更改为0

Question

在下面的代码中，我有3个tab-group。当我使用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 doesn't work on 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>

这只是一个想法，也许你可以改进这种方法。