使用ng-content和*ngtemplateOutlet在DOM中不显示



我有三个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标记。
谢谢!

多亏了Vovan_Super,我解决了在子组件中添加这行代码的问题

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

相关内容

  • 没有找到相关文章

最新更新