Angular中如何避免子组件接收的ElementRef出现undefined问题？

问题描述 #

我有父、子两个组件，当父组件ngOnInit中执行大量逻辑时，子组件的ngAfterViewInit钩子中this.elementRef有时会是undefined。原因是子组件先完成初始化，而父组件的ElementRef还没来得及获取到有效值。现在需要确保子组件能获取到有效的ElementRef，该如何解决？

方案1：通过@Input() setter监听值变化 #

把子组件的@Input()改成setter形式，一旦elementRef传入（包括从undefined变为有效值的时刻），立即触发处理逻辑：

// 子组件代码
export class ChildComponent implements OnInit {
  private formBuilder: FormBuilder = inject(FormBuilder);
  childForm: FormGroup;
  private _elementRef: ElementRef;

  @Input() set elementRef(ref: ElementRef) {
    this._elementRef = ref;
    if (ref) {
      // 在这里编写需要使用elementRef的逻辑
      this.handleElementRef(ref);
    }
  }

  get elementRef(): ElementRef {
    return this._elementRef;
  }

  ngOnInit() {
    this.childForm = this.formBuilder.group({
      // ... 子表单配置
    });
  }

  private handleElementRef(ref: ElementRef) {
    console.log(ref);
    // 你的DOM操作或其他逻辑
  }
}

方案2：用ngOnChanges监听输入变化 #

利用ngOnChanges钩子监听elementRef的变化，当它变为有效值时执行处理：

// 子组件代码
import { SimpleChanges } from '@angular/core';

export class ChildComponent implements OnInit, OnChanges {
  private formBuilder: FormBuilder = inject(FormBuilder);
  childForm: FormGroup;
  @Input() elementRef: ElementRef;

  ngOnInit() {
    this.childForm = this.formBuilder.group({
      // ... 子表单配置
    });
  }

  ngOnChanges(changes: SimpleChanges) {
    // 检查elementRef是否有变化，且当前值不为undefined
    if (changes['elementRef'] && changes['elementRef'].currentValue) {
      this.handleElementRef(changes['elementRef'].currentValue);
    }
  }

  private handleElementRef(ref: ElementRef) {
    console.log(ref);
    // 你的处理逻辑
  }
}

方案3：控制子组件加载时机（确保父元素就绪后再渲染） #

如果父组件的#checkListRef是动态渲染的，先调整父组件@ViewChild的static属性为false，再通过条件渲染控制子组件的加载时机：

// 父组件代码
export class ParentComponent implements OnInit, AfterViewInit {
  private formBuilder: FormBuilder = inject(FormBuilder);
  parentForm: FormGroup;
  @ViewChild('checkListRef', { read: ElementRef, static: false }) elementRef: ElementRef;
  isElementReady = false; // 标记元素是否就绪

  ngOnInit() {
    // 模拟大量初始化逻辑
    setTimeout(() => {
      this.parentForm = this.formBuilder.group({
        child: this.formBuilder.control( [] )
      });
    }, 1000);
  }

  ngAfterViewInit() {
    // 确认elementRef存在后，允许加载子组件
    if (this.elementRef) {
      this.isElementReady = true;
    }
  }
}

父组件模板添加条件渲染：

<form [formGroup]="parentForm" (ngSubmit)="onSubmit(parentForm)" novalidate autocomplete="off">
  <!-- 仅当父元素就绪后才渲染子组件 -->
  <app-child #childRef [elementRef]="elementRef" *ngIf="isElementReady">
  </app-child>
</form>

补充提示 #

• 请确保父组件模板中确实存在#checkListRef标记的元素，否则@ViewChild永远无法获取到有效值，这是容易忽略的隐性问题。
• 优先选择方案1或2，它们更贴合Angular的数据流机制，无需控制子组件加载时机，适配性更强。

内容的提问来源于stack exchange，提问作者L. Kvri