Angular中ContentChildren无法检测带*ngIf的组件如何解决？

我有一个容器组件：

<ng-container *ngFor="let lang of langs">
  <ng-container *ngIf="lang == selectedLang" [ngTemplateOutlet]="template">
  </ng-container>
</ng-container>

该组件包含子组件：

<app-translated-inputs [languagesAvailable]="languagesAvailable$ | async">
  <ng-template>
    <app-test></app-test>
  </ng-template>
</app-translated-inputs>

目前只有当子组件可见（*ngIf为true）时，父组件才能通过以下代码获取其子组件引用：

@ContentChildren(FormAbstract, {descendants: true}) contentChildrenForms: QueryList<FormAbstract> | undefined;

需要实现组件不可见时也能获取到该引用。

核心问题在于*ngIf为false时会销毁对应的组件实例，导致@ContentChildren无法捕获到引用。要保留组件实例，只需改用CSS方式隐藏元素，而非销毁它。

• 替换*ngIf为CSS隐藏方案
  把原来的*ngIf换成[hidden]或者通过ngStyle直接控制display属性，这样组件实例会被创建但不会显示，@ContentChildren就能正常捕获到引用：

  <ng-container *ngFor="let lang of langs">
    <ng-container [hidden]="lang != selectedLang" [ngTemplateOutlet]="template">
    </ng-container>
  </ng-container>
  

  若[hidden]被其他CSS规则覆盖，更可靠的方式是直接控制display：

  <ng-container *ngFor="let lang of langs">
    <ng-container [ngStyle]="{ display: lang == selectedLang ? 'block' : 'none' }" [ngTemplateOutlet]="template">
    </ng-container>
  </ng-container>
  

• 注意事项

  • 这种方式会创建所有语言对应的子组件实例，如果语言数量较多，会带来一定性能开销，需要根据实际场景评估是否适用。
  • 若不想提前创建所有实例，可考虑通过ViewContainerRef手动预加载模板内容，但实现复杂度会更高，上述CSS隐藏是最直接的解决方案。

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