Angular父子及兄弟组件获取元素引用报TypeError undefined问题求解

错误原因 #

• 模板引用变量作用域限制：#queryInput是定义在QueryBoxComponent内部模板的变量，作用域仅局限于QueryBoxComponent自身模板，父组件、兄弟组件模板中直接访问queryInput天然无法识别，会返回undefined
• 跨组件访问逻辑错误：兄弟组件QueryResetComponent没有权限直接读取另一个子组件内部的DOM元素，父组件即使通过@ViewChild获取QueryBoxComponent实例，也需要子组件主动暴露内部的input引用才能正常访问
• 父组件事件绑定错误：父组件模板中(keyupEvent)="queryFilter(queryInput.value)"的写法中，queryInput不属于父组件模板作用域的变量，读取value必然抛出异常

正确实现方案 #

步骤1：改造QueryBoxComponent（子组件1） #

在子组件内部暴露input引用，同时通过输出事件把输入值同步给父组件
ts代码：

import { Component, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'query-box',
  templateUrl: './query-box.component.html'
})
export class QueryBoxComponent {
  @ViewChild('queryInput') queryInput!: ElementRef<HTMLInputElement>;
  @Output() keyupEvent = new EventEmitter<string>();

  onKeyup() {
    const value = this.queryInput.nativeElement.value;
    this.keyupEvent.emit(value);
  }

  // 对外暴露重置输入框方法，供父组件调用
  reset() {
    this.queryInput.nativeElement.value = '';
    this.keyupEvent.emit('');
  }
}

原有html模板无需修改。

步骤2：改造QueryResetComponent（子组件2） #

通过输入属性接收需要显示的查询值，点击事件抛出给父组件处理
ts代码：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'query-reset',
  templateUrl: './query-reset.component.html'
})
export class QueryResetComponent {
  @Input() queryValue = '';
  @Output() clickEvent = new EventEmitter<void>();

  onClick() {
    this.clickEvent.emit();
  }
}

html模板修改为：

<span (click)="onClick()">
  {{queryValue}}
</span>

步骤3：改造父组件 #

父组件作为中间层管理两个子组件的状态交互
ts代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { QueryBoxComponent } from './query-box.component';

@Component({
  selector: 'parent-component',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements AfterViewInit {
  isSearching = false;
  currentQuery = '';
  @ViewChild(QueryBoxComponent) queryBox!: QueryBoxComponent;

  ngAfterViewInit() {
    // 若需要初始化操作input，必须在此生命周期之后访问queryBox，避免undefined
  }

  queryFilter(query: string) {
    this.currentQuery = query;
    this.isSearching = !!query.trim();
    // 补充自身查询过滤逻辑
  }

  queryReset() {
    this.queryBox.reset();
    this.isSearching = false;
    // 补充自身重置逻辑
  }
}

html模板修改为：

<query-box
  [ngClass]="{
    ns: isSearching
  }"
  (keyupEvent)="queryFilter($event)"
></query-box>
<query-reset
  *ngIf="isSearching"
  [queryValue]="currentQuery"
  (clickEvent)="queryReset()"
></query-reset>

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