如何为mat-tab-group内mat-tab中的input元素设置自动聚焦？

我完全理解你的困扰——mat-tab-group的自动聚焦确实是为了可访问性设计，但在某些场景下确实会打乱原本的交互逻辑，而且用长延迟的超时方案确实不够优雅。这里有几个更靠谱的解决办法：

1. 自定义指令拦截自动聚焦（推荐） #

这种方法封装性好，能在多个组件中复用，而且不需要依赖长延迟：

首先创建一个自定义指令：

import { Directive, ElementRef, OnInit } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Directive({
  selector: '[preventTabAutoFocus]'
})
export class PreventTabAutoFocusDirective implements OnInit {
  constructor(private tabGroup: MatTabGroup, private el: ElementRef) {}

  ngOnInit() {
    // 用0延迟的宏任务，确保在mat-tab-group的自动聚焦逻辑执行后再处理
    setTimeout(() => {
      const activeTabLabel = this.el.nativeElement.querySelector('.mat-tab-label-active');
      if (activeTabLabel) {
        activeTabLabel.blur();
      }
    }, 0);
  }
}

然后在你的模板中直接使用这个指令：

<mat-tab-group preventTabAutoFocus>
  <mat-tab label="标签1">内容1</mat-tab>
  <mat-tab label="标签2">内容2</mat-tab>
</mat-tab-group>

原理是setTimeout(0)会把我们的代码放到当前事件循环的末尾执行，刚好在mat-tab-group内部的自动聚焦逻辑之后，所以不需要设置几百毫秒的长延迟。

2. 组件内直接控制焦点 #

如果只是单个组件需要这个功能，可以直接在组件的生命周期钩子中处理：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-your-component',
  template: `
    <mat-tab-group #tabGroup>
      <mat-tab label="标签1">内容1</mat-tab>
      <mat-tab label="标签2">内容2</mat-tab>
    </mat-tab-group>
  `
})
export class YourComponent implements AfterViewInit {
  @ViewChild('tabGroup') tabGroup: MatTabGroup;

  ngAfterViewInit() {
    setTimeout(() => {
      const activeLabel = this.tabGroup._elementRef.nativeElement.querySelector('.mat-tab-label-active');
      if (activeLabel) {
        activeLabel.blur();
      }
    }, 0);
  }
}

3. 调整可访问性属性（谨慎使用） #

如果你确定你的场景不需要保留这个可访问性特性，可以尝试给标签元素设置tabIndex="-1"，让它无法被自动聚焦：

<mat-tab-group>
  <mat-tab label="标签1" [tabIndex]="-1">内容1</mat-tab>
  <mat-tab label="标签2" [tabIndex]="-1">内容2</mat-tab>
</mat-tab-group>

不过注意：这种方法可能会影响键盘导航的可访问性，除非你已经有其他替代方案保证页面的可访问性，否则不推荐使用。

内容的提问来源于stack exchange，提问作者Elessariel