无*ngIf时@ViewChild与@ViewChildren仍返回undefined的问题排查

你的问题核心在于通过ng-content投影进来的子组件，不属于当前组件的直接视图子节点，所以@ViewChild和@ViewChildren无法捕获到它们——这两个装饰器只能查找当前组件模板中直接声明的元素或组件。针对投影内容，Angular提供了专门的@ContentChild和@ContentChildren装饰器，下面是具体的解决方案：

一、替换为@ContentChild/@ContentChildren获取投影组件 #

修改你的父组件代码，把@ViewChild换成@ContentChild，@ViewChildren换成@ContentChildren，同时要在ngAfterContentInit钩子中访问（投影内容在这个生命周期钩子后才完成初始化）：

import { Component, OnInit, AfterContentInit, ContentChild, ContentChildren, QueryList } from '@angular/core';
import { ChildComponent } from './child.component';

@Component({
  selector: 'app-parent',
  template: `<div><ng-content></ng-content></div>`,
})
export class ParentComponent implements OnInit, AfterContentInit {
  // 单个投影子组件
  @ContentChild(ChildComponent) child: ChildComponent;
  // 多个投影子组件（参数用组件类，不是选择器字符串）
  @ContentChildren(ChildComponent) children: QueryList<ChildComponent>;

  constructor() { }

  ngOnInit(): void {
    // 这里依然会是undefined，因为投影内容还没初始化
    console.log(this.child);
  }

  ngAfterContentInit() {
    // 现在可以获取到投影的子组件了
    console.log(this.child);
    console.log(this.children);

    // 监听子组件列表的动态变化
    this.children.changes.subscribe((list: QueryList<ChildComponent>) => {
      console.log('投影组件列表变化:', list);
      this.getChildElementDimensions(list.first);
    });

    // 初次获取子组件的位置和尺寸
    this.getChildElementDimensions(this.child);
  }

  // 获取子组件DOM元素的位置和尺寸
  private getChildElementDimensions(childComponent: ChildComponent) {
    if (!childComponent) return;
    // 先在子组件中暴露ElementRef：
    // 子组件代码修改：
    // import { Component, ElementRef } from '@angular/core';
    // export class ChildComponent {
    //   constructor(public elementRef: ElementRef) { }
    // }
    const nativeElement = childComponent.elementRef.nativeElement;
    const rect = nativeElement.getBoundingClientRect();
    console.log('子组件位置尺寸:', {
      top: rect.top,
      left: rect.left,
      width: rect.width,
      height: rect.height
    });
  }
}

二、直接获取投影DOM元素的替代方案 #

如果你不需要获取子组件实例，只需要获取投影的DOM元素，可以给投影内容添加模板引用变量，然后用@ContentChild获取ElementRef：

父组件模板修改： #

<div>
  <ng-content #projectedContent></ng-content>
</div>

父组件代码： #

@ContentChild('projectedContent', { read: ElementRef }) projectedContent: ElementRef;

ngAfterContentInit() {
  // 获取投影内容中的所有app-child元素
  const childElements = this.projectedContent.nativeElement.querySelectorAll('app-child');
  if (childElements.length > 0) {
    const rect = childElements[0].getBoundingClientRect();
    console.log('子元素位置尺寸:', rect);
  }
}

关键注意点 #

• 投影内容的初始化时机是AfterContentInit，必须在这个钩子之后才能访问，ngOnInit时投影内容还未插入到组件视图中。
• @ContentChild/@ContentChildren的参数可以是组件类、指令类或模板引用变量，不能直接使用CSS选择器字符串（比如'app-child'）。
• 如果子组件存在异步数据加载或动态渲染逻辑，可能需要额外监听元素的渲染状态，确保获取尺寸时元素已经完全渲染。

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