ContentChildren 不检测带有 *ngIf 的组件答案

【问题标题】：ContentChildren doesn't detect components with *ngIfContentChildren 不检测带有 *ngIf 的组件
【发布时间】：2023-02-03 21:24:52
【问题描述】：

我有一个容器组件：

    <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;

即使组件不可见，我如何才能获得参考？

【问题讨论】：

标签： angular

【解决方案1】：

您可以使用 [hidden] 而不是 *ngIf，它将被加载到 DOM 中并可从 ContentChildren 访问，而当 DOM 不满足您的条件时，ngIf 将被删除。

【讨论】：