父组件如何将多个ng-templates传递给子组件?
Parent组件的示例包含多个ng-templates:
<app-childcomponent>
<ng-template>Item A</ng-template>
<ng-template>Item B</ng-template>
...
</app-childcomponent>
子组件需要从父级接收ng-templates并放入 app-menu
内:
<app-menu>
<ng-content></ng-content>
</app-menu>
所以它在Child组件中看起来像这样:
<app-menu>
<ng-template>Item 1</ng-template> //having trouble sending this to app-menu from parent
<ng-template>Item 2</ng-template> //having trouble sending this to app-menu from parent
<app-menu>
但似乎 ng-content
是空的,导致 app-menu
没有得到 multiple ng-templates .
<app-menu>
//empty
</app-menu>
What have I tried?
-
我试过通过@input传递模板 .
<app-childcomponent [myTemplate]="myTemplate"></child-component>
-
模板插座 . 结果:子组件无法获取
ng-templates
.
父html:
<app-childcomponent>
<ng-template>Item 1</ng-template>
<ng-template>Item 2</ng-template>
</app-childcomponent>
家长班:
@ContentChild(TemplateRef) templateRef: TemplateRef<any>;
儿童HTML:
<app-menu>
<ng-template [ngTemplateOutlet]="templateRef"></ng-template>
<app-menu>
预计包含 <ng-template [ngTemplateOutlet]="templateRef"></ng-template>
<ng-template>Item 1</ng-template>
<ng-template>Item 2</ng-template>
但它是空的 .
回复@Ricardo解决方案
我试过你的 update
. 它也是空的 .
家长:
<app-childcomponent top-left-menu>
<ng-template>Item 1</ng-template>
<ng-template>Item 2</ng-template>
</app-childcomponent>
儿童:
<ng-content select="[top-left-menu]"></ng-content>
Also I also tried passing ng-template to ng-content but Print ME! did not get rendered. It was empty. It seems like ng-template dont go into ng-content?
家长:
<app-childcomponent [contextMenuSubject]="contextmenuSubject">
<ng-template>Print ME!</ng-template>
</app-childcomponent>
儿童:
<ng-content></ng-content>
1 回答
您可以在子组件中声明一个带有属性ngTemplateOutlet的默认模板,以便可以从父组件绑定自定义模板
您应该像变量一样公开模板,以便可以使用父组件来注入自定义模板 .
父组件应如下所示
在您的子组件中,您可以声明ng-content,如下所示:
然后在您的父组件中,您可以这样使用他的引用:
您的自定义html /组件将放置在ng-content的位置