ionic4 - 自动关注 Ionic Angular 应用程序中的输入字段，同时打开搜索弹出窗口

Question

我在 Ionic 4 和 Angular 8 App 中遇到了关于自动对焦的问题

当我在应用程序中打开搜索模式时，我想自动关注搜索框

标签： ionic4angular8

Answer 1

为此，我找到了解决方案

我在输入字段

离子代码上添加了参考元素

<ion-input placeholder="Search for Products" #product_id></ion-input> 

搜索模态组件代码

import { IonInput } from '@ionic/angular';
export class SearchModalComponent implements OnInit {

  @ViewChild('product_id', {static:true}) product_id:IonInput;

  ngAfterViewInit() {
    setTimeout(() => {
      this.product_id.setFocus();
    },500);
  }
}