ngx-otp-input的autofocus属性在Ionic 5中无法生效如何解决？

• Ionic 页面生命周期与原生 Angular 项目存在差异：ngx-otp-input 自带的 autofocus 逻辑依赖 Angular 的 AfterViewInit 钩子触发，但 Ionic 页面的 ngOnInit、AfterViewInit 触发时，页面 DOM 可能还未完成挂载，路由过渡动画也会阻断原生自动对焦逻辑的执行。
• Ionic 默认开启路由页面缓存，二次进入已缓存页面时，AfterViewInit 钩子不会重新触发，导致组件自带的 autofocus 逻辑无法执行。
• 移动端 WebView 存在安全限制，非用户交互触发的自动对焦可能会被系统拦截，原生 autofocus 属性优先级低于该限制。

方法1：结合 Ionic 生命周期手动触发对焦（优先推荐） #

ionViewDidEnter 是 Ionic 独有的生命周期钩子，会在页面完全进入、过渡动画全部结束后触发，对焦时机最准确。

1. 给 ngx-otp-input 组件添加模板引用：

<ngx-otp-input #otpInput [config]="otpConfig"></ngx-otp-input>

2. 在业务组件中调用组件自带的 focus() 方法：

import { Component, ViewChild } from '@angular/core';
import { NgxOtpInputComponent } from 'ngx-otp-input';

@Component({
  selector: 'app-otp-verification',
  templateUrl: './otp-verification.page.html',
  styleUrls: ['./otp-verification.page.scss'],
})
export class OtpVerificationPage {
  @ViewChild('otpInput') otpInput!: NgxOtpInputComponent;

  // Ionic页面完全进入后执行
  ionViewDidEnter() {
    // 添加100ms延时兼容低版本Ionic的动画残留问题，无兼容性问题可去掉延时
    setTimeout(() => {
      this.otpInput.focus();
    }, 100);
  }
}

方法2：组件配置项补充适配 #

在 ngx-otp-input 的配置中显式开启 autofocus，配合手动对焦逻辑双重保障：

public otpConfig = {
  // 其余原有配置项保留
  autofocus: true,
  disableAutoFocus: false
};

方法3：缓存页面场景适配 #

如果项目开启了 Ionic 路由页面缓存，不需要额外修改缓存逻辑，上述方法1的ionViewDidEnter钩子在每次页面进入时都会触发，已经可以覆盖首次进入、二次进入缓存页面的所有场景。

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