html - 将 ng-content 与 *ngtemplateOutlet 一起使用不会在 DOM 中显示

Question

我有三个 Angular 组件，一个基础组件和两个子组件（child1 和 child2），具有以下结构：

child1.component.html

<ng-template #child1Template>
    <div>
        <h1>CHILD 1</h1>
    </div>
</ng-template>

child2.component.html

<ng-template #child2Template>
    <div>
        <h1>CHILD 2</h1>
    </div>
</ng-template>

base.component.html

<app-child1 #wrapper_child1 class="hidden"></app-child1>
<app-child2 #wrapper_child2 class="hidden"></app-child2>

<div class="baseContainer">
    <ng-content *ngTemplateOutlet="wrapper_child1.child1Template"></ng-content>
    <ng-content *ngTemplateOutlet="wrapper_child2.child1Template"></ng-content>
</div>

当我检查 DOM 时，它正确显示 child1 但 child2 没有出现，并且有

<!--bindings={
  "ng-reflect-ng-template-outlet": "[object Object]"
}-->

有人有一些解释吗？
请注意，我的结构绝对需要这种结构，因为我需要在基本组件中插入子元素的内容，而无需添加额外的 html 标记。
谢谢！

Answer 1

感谢 Vovan_Super 我解决了在子组件中添加这行代码的问题

@ViewChild('child1Template') child1Template: TemplateRef<any>;