Angular中点击文本时聚焦输入框的最优实现方案咨询

我需要实现点击页面中的一段文本时，将焦点定位到同页面的一个输入字段上的功能。请问实现该需求的最佳方式是什么？我已为该文本元素绑定了一个方法，相关代码如下：

相关代码 #

HTML代码 #

<form-input
    appOskInput
    (inputChanged)="onInputChanged($event,'accountNumber')"
    (blurChanged)="onBlurChanged($event)"
    [formStatus]="formStatus"
    [parentFormGroup]="setupForm"
    [data]="{
      formControlName: 'accountNumber',
      name: 'accountNumber',
      label: 'Accounnt Number'
    }"
>
</form-input>

<a (click)="isKeyboardActive()" class="use-kepypad">
  <img class="mouse-icon" src="assets/images/ford/mouse-computer.png"> 
  <img class="mouse-icon" src="assets/images/ford/mouse-computer-hover.png">
  {{ 'preLogon.common.label.useKeypad'|translate }}
</a>

TypeScript代码 #

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CommonValidators } from './path-to-common-validators';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  setupForm!: FormGroup;
  formStatus!: any;

  ngOnInit() {
    this.setupForm = new FormGroup({
      accountNumber: new FormControl('', { 
        validators: [Validators.required, CommonValidators.isValidNumber], 
        updateOn: 'blur' 
      })
    });
  }

  isKeyboardActive() {
    
  }

  onInputChanged(event: any, field: string) {
    // 你的输入变更逻辑
  }

  onBlurChanged(event: any) {
    // 你的失焦逻辑
  }
}

最佳实现方案 #

在Angular中，推荐通过组件引用+ViewChild的方式实现，符合框架的组件化设计思想，避免直接操作DOM。具体步骤如下：

1. 为自定义form-input组件添加模板引用 #

在HTML中给form-input添加#accountInput标记，方便后续获取组件实例：

<form-input
    #accountInput
    appOskInput
    (inputChanged)="onInputChanged($event,'accountNumber')"
    (blurChanged)="onBlurChanged($event)"
    [formStatus]="formStatus"
    [parentFormGroup]="setupForm"
    [data]="{
      formControlName: 'accountNumber',
      name: 'accountNumber',
      label: 'Accounnt Number'
    }"
>
</form-input>

2. 在组件类中通过ViewChild获取组件引用 #

导入ViewChild，并获取form-input的实例：

import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { CommonValidators } from './path-to-common-validators';
import { FormInputComponent } from './path-to-form-input.component'; // 导入自定义的form-input组件

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  setupForm!: FormGroup;
  formStatus!: any;
  @ViewChild('accountInput') accountInput!: FormInputComponent; // 获取组件引用

  // ... 其他代码不变

  isKeyboardActive() {
    // 调用组件的focus方法聚焦输入框
    this.accountInput.focus();
  }
}

3. 在form-input组件中暴露focus方法 #

因为form-input是自定义组件，需要在其内部实现focus方法，用来触发内部原生输入框的聚焦：

// form-input.component.ts
import { Component, Input, ViewChild, ElementRef } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'form-input',
  templateUrl: './form-input.component.html',
  styleUrls: ['./form-input.component.css']
})
export class FormInputComponent {
  @Input() parentFormGroup!: FormGroup;
  @Input() data!: any;
  @Input() formStatus!: any;
  
  @ViewChild('inputElement') inputElement!: ElementRef<HTMLInputElement>; // 获取内部原生输入框

  // 暴露focus方法供父组件调用
  focus() {
    this.inputElement.nativeElement.focus();
  }

  // ... 其他组件逻辑
}

同时在form-input的模板中，给原生输入框添加#inputElement标记：

<!-- form-input.component.html -->
<input 
  #inputElement
  type="text"
  [formControl]="parentFormGroup.get(data.formControlName)"
  [name]="data.name"
  [placeholder]="data.label"
>
<!-- 其他组件模板内容 -->

备选方案（不推荐） #

如果无法修改form-input组件，也可以直接通过原生DOM选择器获取输入框，但这种方式不符合Angular的最佳实践，可能会因为DOM结构变化导致失效：

isKeyboardActive() {
  const input = document.querySelector('input[name="accountNumber"]') as HTMLInputElement;
  if (input) {
    input.focus();
  }
}

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