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

Question

父组件如何将多个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>

所以它在子组件中看起来像这样：

<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>

我尝试了什么？

1. 我尝试通过@input 传递模板。 <app-childcomponent [myTemplate]="myTemplate"></child-component>

2. 模板出口。结果：子组件无法获取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 的位置