Angular同一组件不同表单中<ion-input>如何实现多autofocus自动聚焦

问题原因 #

原生autofocus属性仅会在页面初次加载时识别第一个匹配的元素，同一页面存在多个带autofocus的元素时只会生效第一个。同时Ionic封装的ion-input属于自定义组件，动态切换显示的表单绑定autofocus变量时，不会自动触发聚焦行为，因此你当前的写法无法实现需求。

正确实现方案 #

核心思路是给每个输入框添加模板引用，在对应表单激活显示时，主动调用ion-input内置的focus()方法触发聚焦。

1. HTML 代码调整 #

给两个输入框分别添加模板引用变量，同时保留你原有的表单切换逻辑（示例中用isLoginForm变量控制登录/注册表单显示）：

<!-- 登录表单 -->
<div *ngIf="isLoginForm">
  <ion-input #loginInput type="text" required></ion-input>
  <!-- 其他登录表单字段 -->
</div>

<!-- 注册表单 -->
<div *ngIf="!isLoginForm">
  <ion-input #registerInput type="text"></ion-input>
  <!-- 其他注册表单字段 -->
</div>

2. TS 代码调整 #

通过ViewChild获取输入框实例，在表单切换逻辑中触发对应输入框的聚焦：

import { Component, ViewChild } from '@angular/core';
import { IonInput } from '@ionic/angular';

@Component({
  // 你的组件原有配置
})
export class YourComponent {
  @ViewChild('loginInput') loginInput!: IonInput;
  @ViewChild('registerInput') registerInput!: IonInput;
  // 控制表单显示的变量
  public isLoginForm: boolean = true;

  // 表单切换方法示例
  switchForm() {
    this.isLoginForm = !this.isLoginForm;
    // 等待DOM渲染完成后触发聚焦
    setTimeout(() => {
      if (this.isLoginForm) {
        this.loginInput?.focus();
      } else {
        this.registerInput?.focus();
      }
    }, 100);
  }

  // 页面初始化默认聚焦登录输入框可加此钩子
  ngAfterViewInit() {
    setTimeout(() => {
      this.loginInput?.focus();
    }, 100);
  }
}

注意事项 #

• 加setTimeout是为了等待*ngIf控制的DOM元素渲染完成，避免出现元素未初始化调用focus()报错的问题，时间可以根据实际场景调整，也可以用Angular的ChangeDetectorRef.detectChanges()替代定时器实现更优雅的视图更新监听。
• 代码中加?.可选链运算符是为了做非空校验，避免运行时报错。

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