在ng-template中使用ng-content

Jor*_*dan 14 angular2-template angular

是否可以在一个内部使用<ng-content>(和它的选择选项)<ng-template>或它是否只在一个组件内工作?

<ng-container *ngTemplateOutlet="tpl">
  <span greetings>Hello</span>
</ng-container>

<ng-template #tpl>
  <ng-content select="[greetings]"></ng-content> World !
</ng-template>
Run Code Online (Sandbox Code Playgroud)

上面的代码只渲染World !:(

这是现场的例子

Gro*_*hni 19

据我所知,无法使用ng-content,但您可以为模板提供参数。所以可以传递另一个NgTemplate,它可以再次与NgTemplateOutlet原始模板内部的一起使用。这是一个工作示例:

<ng-container *ngTemplateOutlet="tpl, context: {$implicit: paramTemplate}">
</ng-container>

<ng-template #paramTemplate>
  <span>Hello</span>
</ng-template>


<ng-template #tpl let-param>
  <ng-container *ngTemplateOutlet="param"></ng-container> World !
</ng-template>
Run Code Online (Sandbox Code Playgroud)

实际上甚至可以将多个模板传递给原始模板:

<ng-container *ngTemplateOutlet="tpl, context: {'param1': paramTemplate1, 'param2': paramTemplate2}">
</ng-container>

<ng-template #paramTemplate1>
  <span>Hello</span>
</ng-template>

<ng-template #paramTemplate2>
  <span>World</span>
</ng-template>


<ng-template #tpl let-param1="param1" let-param2="param2">
  <ng-container *ngTemplateOutlet="param1"></ng-container>
  <ng-container *ngTemplateOutlet="param2"></ng-container>
</ng-template>
Run Code Online (Sandbox Code Playgroud)