Ionic 如何实现页面加载或返回时清空指定ion-input文本输入框

你当前使用的是Ionic框架下的ion-input自定义组件，完全按照以下步骤调整，就能实现「无论是应用启动首次加载、还是按返回键回到该页面，只要触发页面进入流程，输入框就自动重置为空」的需求，不需要依赖复杂的DOM操作逻辑。

1. 调整输入框绑定逻辑，避开DOM操作的不稳定问题 #

很多人实现清空失败的核心原因，是把自定义Web Component的ion-input当成原生input直接操作DOM属性，实际上框架层面的双向绑定才是稳定可控的清空路径：

• 在对应页面的组件类中，先定义一个初始为空的绑定变量：

// 页面组件类内部定义
currentTicketId: string = '';

• 替换原有模板中ion-input的事件绑定写法，用双向值绑定替代直接从事件对象取DOM值的逻辑：

<ion-input 
  type="text"   
  [(ngModel)]="currentTicketId"
  (input)="getid(currentTicketId)" 
  autofocus="true" 
  id="get_ticket_id">
</ion-input>

这样修改的原因是：ion-input作为自定义组件，内部事件对象的target透传不一定和原生input完全一致，双向绑定的方式可以让框架自动同步视图和数据模型的状态，后续清空值时不会出现“DOM显示空了，但模型值还留着旧内容”的不一致问题。

2. 匹配正确的生命周期钩子，触发清空逻辑 #

这里要避开一个常见坑：不要把清空逻辑写在ngOnInit里。

坑点说明：ngOnInit仅在组件第一次被创建时执行，Ionic默认的页面栈机制会把已访问过的页面实例缓存起来，用户按返回键回到这个页面时，直接复用缓存的实例，不会重新执行ngOnInit的逻辑，自然就达不到返回也清空的要求。

正确的触发钩子是ionViewWillEnter，这个钩子的触发时机完全匹配你的需求：不管是应用首次启动加载页面、还是从其他页面返回进入被缓存的页面，只要页面即将进入展示状态，就会执行钩子内的逻辑。
直接在组件类中添加对应钩子代码：

ionViewWillEnter() {
  // 每次页面进入前，直接把绑定的输入值重置为空
  this.currentTicketId = '';
  // 如果原有的getid方法需要同步处理空值状态，直接手动调用一次即可
  this.getid('');
}

3. 解决二次进入页面时autofocus失效的适配问题 #

很多人会遇到：首次加载页面输入框能自动聚焦，但返回页面后清空了值，但输入框不会自动拉起聚焦，这是因为原生的autofocus属性只会在DOM第一次挂载时生效，对缓存复用的页面无效。
可以在页面完全进入视图后，手动触发一次聚焦动作：

async ionViewDidEnter() {
  // 定位到ion-input内部包裹的原生input元素，手动触发聚焦
  const customInputEle = document.getElementById('get_ticket_id');
  customInputEle?.querySelector('input')?.focus();
}

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