如何从父组件访问子组件的ion-input并设置焦点？

步骤1：修改子组件（add-guest.component） #

调整HTML模板 #

给目标ion-input添加模板引用变量，用于后续获取组件实例：

<form [formGroup]="form">
  <ion-row>
    <ion-col>
      <ion-item>
        <ion-label position="stacked" color="light">Guest name</ion-label>
        <!-- 添加#guestInput模板引用 -->
        <ion-input 
          #guestInput
          formControlName="guestName"
          color="light"
          type="text"
          placeholder="Guest name"
        >
        </ion-input>
      </ion-item>
    </ion-col>
  </ion-row>
</form>

调整TypeScript代码 #

导入依赖并通过@ViewChild获取输入框实例，同时定义一个公共方法供父组件调用：

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

@Component({
  selector: 'app-add-guest',
  templateUrl: './add-guest.component.html',
  styleUrls: ['./add-guest.component.scss'],
})
export class AddGuestComponent {
  form = new FormGroup({
    guestName: new FormControl('')
  });

  // 通过模板引用获取ion-input实例
  @ViewChild('guestInput') private guestInput!: IonInput;

  // 暴露给父组件的公共方法，用于设置焦点
  focusGuestInput(): void {
    this.guestInput.setFocus();
  }
}

步骤2：修改父组件（attendees.component） #

调整HTML模板 #

给子组件添加模板引用，方便父组件获取其实例：

<!-- 添加#addGuestComp模板引用 -->
<app-add-guest #addGuestComp (guestUserChange)="addGuest($event)"></app-add-guest>

调整TypeScript代码 #

导入子组件并通过@ViewChild获取实例，在需要的时机调用焦点设置方法：

import { Component, ViewChild } from '@angular/core';
import { AddGuestComponent } from './add-guest/add-guest.component';

@Component({
  selector: 'app-attendees',
  templateUrl: './attendees.component.html',
  styleUrls: ['./attendees.component.scss'],
})
export class AttendeesComponent {
  // 获取子组件实例
  @ViewChild('addGuestComp') private addGuestComponent!: AddGuestComponent;

  // 示例：在某个业务逻辑中触发焦点设置（比如按钮点击、页面加载完成）
  triggerInputFocus(): void {
    this.addGuestComponent.focusGuestInput();
  }

  addGuest(event: any): void {
    // 你的原有业务逻辑
  }
}

通过上述改造，父组件即可通过调用子组件暴露的focusGuestInput()方法，间接让子组件内的ion-input获取焦点。

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