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

Question

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

例如，父组件包含多个ng-template：

<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没有获取到多个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 solution

我尝试了你的 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>

- Zainu

---

如果您将其作为输入参数发送，则应使用NgTemplateOutlet从模板动态创建组件。你的结果是什么？ - Oleksandr Poshtaruk

我将其作为“input”参数发送，并接收类型为Input()myTemplate的ElementRef。尝试使用{{ myTemplate}}绘制它，但我猜这是错误的 X.X - Zainu

Angular中ng-template和ngTemplateOutlet的简单解释 - Always_a_learner

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的位置。

- Ricardo

---

嗨，听起来很不错！只是好奇是否有办法将“template”放在“child-component”标签内？<child-component>或者有更简洁的方法吗？ - Zainu

@Zainu，你可以使用<ng-content>标签来实现它，声明这个标签的名称，然后从父组件中引用这个ng-content标签，在你想要放置内部内容的HTML模板中。 - Ricardo

嗨，我已经在子组件中尝试了 <ng-content [ngTemplateOutlet]="customTemplate"></ng-content> 和 @ContentChild(TemplateRef) customTemplate: TemplateRef<any>。在父组件中是这样的 <child-component> <ng-template>项目1</ng-template> <ng-template>项目2</ng-template> </child-component>。 - Zainu

我已经在上面更新了回复@Ricardo的解决方案^ - Zainu