首页 文章

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

提问于
浏览
0

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

所以它在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>

What have I tried?

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

Also I also tried passing ng-template to ng-content but Print ME! did not get rendered. It was empty. It seems like ng-template dont go into ng-content?

家长:

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

儿童:

<ng-content></ng-content>

1 回答

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

相关问题