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

Question

How parent component pass multiple ng-templates to child component?

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

但它是空的。

Replying to @Ricardo solution

我试过你的 update .它也是空的。

家长:

<app-childcomponent top-left-menu>
    <ng-template>Item 1</ng-template>
    <ng-template>Item 2</ng-template>
</app-childcomponent>

child :

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

child :

<ng-content></ng-content>

Answer 1

您可以在您的子组件中声明一个具有属性 ngTemplateOutlet 的默认模板，这样您就可以从父组件绑定(bind)一个自定义模板

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

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

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

父组件应该是这样的

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

Other solution

在您的子组件中，您可以像这样声明 ng-content:

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

那么在你的父组件中，你可以这样使用他的引用:

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

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