Question

父组件如何将多个ng-templates传递给子组件？

父组件示例包含多个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>

我尝试了什么？

我试过通过@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>

此外，我还尝试将ng-template传递给ng-content，但Print ME!未获得渲染。它是空的。似乎ng-template没有进入ng-content？

父：

<app-childcomponent [contextMenuSubject]="contextmenuSubject">
    <ng-template>Print ME!</ng-template>
</app-childcomponent>

子：

<ng-content></ng-content>

Answer 1

您可以在子组件中声明一个带有 ngTemplateOutlet 属性的默认模板，以便绑定父组件中的自定义模板

<ng-template [ngTemplateOutlet]="template || defaultTemplate"></ng-template>

<ng-template #defaultTemplate let-item="item">
    {{item}}
</ng-template>

您应该像变量一样公开模板，以便可以使用父组件来注入自定义模板。

父组件应如下所示

<child-component [template]="customTemplate" ></child-component>
 <ng-template #customTemplate let-item="item">
      {{item.name}}
 </ng-template>

其他解决方案

在您的子组件中，您可以声明ng-content，如下所示：

 <ng-content select="[top-left-menu]"></ng-content>

然后在您的父组件中，您可以这样使用他的引用：

<custom-super-component top-left-menu></custom-super-component>

您的自定义html /组件将放置在ng-content

的位置

父组件如何将HTML传递给Angular中的子组件？

1 个答案: