Angular中同一组件的不同Ionic表单如何使用多个autofocus属性

问题根因 #

原生HTML的autofocus属性仅会在整个文档首次加载完成时触发一次，你的登录、注册页面复用同一login.ts对应组件，通过路由/标签切换显示，切换时页面不会重新加载，因此注册页的autofocus自然不会生效，同组件下跨页面的自动聚焦都不能依赖原生静态属性实现。

修复方案 #

第一步：修改模板代码，移除静态autofocus，添加模板引用

登录页HTML调整

<label class="ci-ter-head ci-opc-50">Email address</label>                          
</div>
<div class="wrapper ci-pl-30 ci-pr-30 ci-pt-5">
   <!-- 移除autofocus="true"，添加模板引用#loginEmailInput -->
   <ion-input #loginEmailInput type="text" id="loginField" class="animated ci-form-field ci-font-size-12 ci-text-clr3 ci-back-input-colr ci-back-input-border-colr ci-mb-10 ci-email-height" [(ngModel)]="userSignInInfo.email" required></ion-input>
</div>
<div class="wrapper ci-pl-30 ci-mt-20">                          
   <label class="ci-ter-head ci-opc-50">Password</label>
</div>
<div class="wrapper ci-pl-30 ci-pr-30 " style="position:relative;">
<ion-input type="{{feildType}}" clearOnEdit="false" id="passwordField" class="animated ci-form-field ci-font-size-12 ci-text-clr3 ci-back-input-colr ci-back-input-border-colr ci-mb-10 ci-password-height" [(ngModel)]="userSignInInfo.password" required>
<span *ngIf="!platform.is('ios')" [hidden] = "shPassword" (click)="showPassword($event);"><img src="../../assets/images/show.svg"></span>
<span *ngIf="!platform.is('ios')" [hidden] = "!shPassword" (click)="showPassword($event);"><img src="../../assets/images/hide.svg"></span>
</ion-input>

注册页HTML调整

<ion-col size-xs="12" size-md="6" class="ci-pr-20">
   <label class="ci-ter-head ci-opc-50 ci-required">Email Address</label>
   <!-- 移除autofocus="true"，添加模板引用#signUpEmailInput -->
   <ion-input #signUpEmailInput type="email" class="inputField" (ionChange)="emailKeydown($event, 'signUpForm')"  [ngClass]="{'close-icon': validationVaribles.errorIconEmail, 'right-icon' : validationVaribles.successIconEmail }" [(ngModel)]="userSignUpInfo.email" class="ci-form-field ci-sec-head"></ion-input>
</ion-col>
<ion-col size-xs="12" size-md="6" class="ci-pr-20">
   <label class="ci-ter-head ci-opc-50 ci-required">Screen Name</label>
   <ion-input type="text" class="inputField" (ionChange)="userKeydown($event)" [ngClass]="{'close-icon': validationVaribles.errorIconUser, 'right-icon' : validationVaribles.successIconUser }" [(ngModel)]="userSignUpInfo.screenName" class="ci-form-field ci-sec-head"></ion-input>
</ion-col>

第二步：修改login.ts逻辑，主动触发聚焦

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {
  // 获取输入框模板引用
  @ViewChild('loginEmailInput') loginEmailInput: IonInput;
  @ViewChild('signUpEmailInput') signUpEmailInput: IonInput;

  // 你的原有变量定义
  userSignInInfo = {email: '', password: ''};
  userSignUpInfo = {email: '', screenName: ''};
  // 当前激活页面标识，根据你的实际业务逻辑替换，示例值为login/signUp
  currentActivePage = 'login';

  // Ionic页面进入生命周期，每次页面显示都会触发
  ionViewDidEnter() {
    this.triggerAutoFocus();
  }

  // 切换页面的回调方法（如果是标签切换，可直接在切换事件中调用）
  switchPage(page: string) {
    this.currentActivePage = page;
    // 切换后主动触发聚焦
    setTimeout(() => this.triggerAutoFocus(), 100);
  }

  // 统一封装聚焦逻辑，后续新增页面需要聚焦只需扩展判断即可
  private triggerAutoFocus() {
    setTimeout(() => {
      if (this.currentActivePage === 'login') {
        this.loginEmailInput?.setFocus();
      } else if (this.currentActivePage === 'signUp') {
        this.signUpEmailInput?.setFocus();
      }
    }, 100);
  }

  // 你的原有业务逻辑代码，比如showPassword、表单校验等保持不变
}

注：添加100ms延时是为了等待页面切换动画完成、元素渲染完毕，避免聚焦失效，可根据实际页面动画时长调整。

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