将 ng-content 与 *ngtemplateOutlet 一起使用未显示在 DOM 中
Using ng-content with *ngtemplateOutlet not show in DOM
我有三个 Angular 组件,一个基本组件和两个 child 组件(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]"
}-->
有人有解释吗?
请注意,我的结构绝对需要这个结构,因为我需要在基础组件中插入 childs 的内容 WITHOUT 添加额外的 html 标签。
谢谢!
感谢 Vovan_Super 我在子组件中添加这行代码解决了我的问题
@ViewChild('child1Template') child1Template: TemplateRef<any>;
我有三个 Angular 组件,一个基本组件和两个 child 组件(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]"
}-->
有人有解释吗?
请注意,我的结构绝对需要这个结构,因为我需要在基础组件中插入 childs 的内容 WITHOUT 添加额外的 html 标签。
谢谢!
感谢 Vovan_Super 我在子组件中添加这行代码解决了我的问题
@ViewChild('child1Template') child1Template: TemplateRef<any>;