在 ng-template 中使用 ng-content

Question

是否可以在 <ng-template> 中使用 <ng-content>（及其 select 选项），还是仅在组件中有效？

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

<ng-template #tpl>
  <ng-content select="[greetings]"></ng-content> World !
</ng-template>

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

Here is the live example

Answer 1

您可以在 ng-template 中使用 ng-content。

这是我不久前整理的东西，演示了根据属性将 ng-content 放在 dom 的某处。查看 tabs.component 的 html 以查看正在使用的内容。

https://stackblitz.com/edit/mobile-ng-content

Answer 2

据我所知，使用 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>

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

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

在 ng-template 中使用 ng-content

using ng-content in ng-template

angular2-template

angular