использование ng-контента в ng-шаблоне

Можно ли использовать <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>

Приведенный выше код просто отображает World ! :(

Вот живой пример

Ответ 1

Структурная директива создает ng-шаблон за сценой, поэтому он не работает должным образом. Дополнительная информация: https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/

<ng-container [ngTemplateOutlet]="lol">
  <div>World</div>
</ng-container>

<ng-template #lol>
  Hello <ng-content select="[div]"></ng-content>
</ng-template>

Пример: https://stackblitz.com/edit/angular-h2fsoh?file=src/app/app.component.html

Ответ 2

Вы можете использовать ng-content внутри ng-template.

Это то, что я собрал некоторое время назад, демонстрируя размещение ng-контента где-то на основе свойств. посмотрите html tabs.component, чтобы увидеть это в использовании.

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

Ответ 3

Насколько я знаю, это невозможно с помощью 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>