Angular Material展开面板内matInput自动聚焦失效，如何使用focus方法？

嘿，我完全懂你遇到的困扰！autofocus属性在这里失效是因为折叠状态下的mat-expansion-panel内容不会被渲染到DOM中，页面加载时input根本不存在，自然没法触发自动聚焦。不过别担心，用Angular的ViewChild配合面板的展开事件就能完美解决这个问题，下面是具体步骤：

步骤1：添加模板引用变量 #

先给你的matInput和mat-expansion-panel加上模板引用变量，方便在组件类里获取它们：

<mat-accordion>
  <mat-expansion-panel #panel (opened)="onPanelOpened()">
    <mat-expansion-panel-header>
      <mat-panel-title> Personal data </mat-panel-title>
      <mat-panel-description> Type your name </mat-panel-description>
    </mat-expansion-panel-header>
    <mat-form-field>
      <input #firstNameInput matInput placeholder="First name">
    </mat-form-field>
  </mat-expansion-panel>
</mat-accordion>

步骤2：在组件类中实现聚焦逻辑 #

首先导入需要的依赖，然后用ViewChild获取模板里的元素，最后在面板展开的回调里调用input的focus()方法：

import { Component, ViewChild } from '@angular/core';
import { MatInput } from '@angular/material/input';
import { MatExpansionPanel } from '@angular/material/expansion';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  @ViewChild('firstNameInput') firstNameInput!: MatInput;
  @ViewChild('panel') panel!: MatExpansionPanel;

  onPanelOpened() {
    // 用setTimeout确保DOM渲染完成后再执行聚焦
    setTimeout(() => {
      this.firstNameInput.focus();
    }, 0);
  }
}

为什么要加setTimeout？ #

有时候面板展开后，DOM元素可能还没完全就绪，加个setTimeout(() => {}, 0)可以让代码放到下一个事件循环执行，确保input已经被渲染到DOM中，这样focus()就能正常生效了。

额外小提示 #

如果你有多个展开面板和对应的输入框，只需要给每个面板和input加不同的模板引用变量，然后分别处理它们的opened事件就好啦！

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