Angular中如何获取自定义组件内部input元素的引用？

问题场景 #

你已经通过@ViewChild获取到了自定义组件MyInputComponent的实例，但希望直接访问其内部的input DOM元素以获取值，且不想修改MyInputComponent的代码。

解决方法 #

方法1：通过ElementRef查询子DOM元素

利用@ViewChild的read选项获取自定义组件的ElementRef，再通过原生DOM API查询内部的input元素：

// my-container.component.ts
import { Component, ViewChild, ElementRef } from '@angular/core';
import { MyInputComponent } from './my-input.component';

@Component({
  selector: 'app-my-container', // 修正原代码中selector与自定义组件重复的错误
  template: `
    <app-my-input #nameInput id="name" name="name"></app-my-input>
    <app-my-input #messageInput id="message" name="message"></app-my-input>
    <button (click)="logValues()">获取输入值</button>
  `
})
export class MyContainerComponent {
  // 获取组件对应的ElementRef
  @ViewChild('messageInput', { read: ElementRef }) messageEl: ElementRef<HTMLElement>;
  @ViewChild('nameInput', { read: ElementRef }) nameEl: ElementRef<HTMLElement>;

  logValues() {
    // 查询内部input并获取值
    const nameInput = this.nameEl.nativeElement.querySelector('input') as HTMLInputElement;
    const messageInput = this.messageEl.nativeElement.querySelector('input') as HTMLInputElement;
    
    console.log('name值:', nameInput.value);
    console.log('message值:', messageInput.value);
  }
}

注意事项

• 这种方法依赖自定义组件的DOM结构，如果后续MyInputComponent的模板结构（比如input的位置、标签）发生变化，查询逻辑会失效。
• 如果MyInputComponent开启了ViewEncapsulation.ShadowDom，这种方法会失效，因为Shadow DOM会隔离内部元素。

最佳实践（可选，需修改自定义组件） #

虽然你要求不修改MyInputComponent，但从组件封装性和可维护性角度，更推荐在MyInputComponent中暴露值的获取方式，比如添加getter或方法：

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

@Component({
  selector: 'app-my-input',
  template: `
    <div>
      <input #innerInput type="text" [id]="id" [name]="name">
    </div>
  `
})
export class MyInputComponent {
  @Input() name = null;
  @Input() id = null;
  @ViewChild('innerInput') innerInput: ElementRef<HTMLInputElement>;

  get value() {
    return this.innerInput.nativeElement.value;
  }
}

之后在容器组件中直接通过组件实例获取值：

@ViewChild('messageInput') messageInput: MyInputComponent;

// 获取值
console.log(this.messageInput.value);

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