父組件如何在Angular中將HTML傳遞給子組件？

Question

父組件如何將多個ng模板傳遞給子組件？

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

我嘗試了什么？

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 / component將放置在ng-content的位置