Angular - есть ли способ проецировать контент внутри ng-шаблона?

Question

Скажите, что у меня есть этот ng-шаблон:

<!--Tooltip template wrapper-->
<ng-template #toolTipWrapper let-tooltipData>
  <span tooltip="{{tooltipData}}" placement="bottom">
    <!-- How do I get content here?-->
  </span>
</ng-template>

и я хочу иметь возможность проецировать контент внутри этого <span>, как показано ниже:

<ng-container *ngTemplateOutlet="toolTipWrapper;context:tooltipData">
  <div> Here is the content I want inside of the span!</div>
</ng-container>

Есть ли способ сделать это?

Я использую Angular 7, если это имеет значение.

Answer 1

Для этого вам нужен еще один шаблон.

<!--Tooltip template wrapper-->
<ng-template #toolTipWrapper let-tooltipData="td" let-tooltipContent="tc">
    <span tooltip="{{tooltipData}}" placement="bottom">
        <ng-container [ngTemplateOutlet]="tooltipContent">
        </ng-container>
    </span>
</ng-template>

<ng-container [ngTemplateOutlet]="toolTipWrapper"
    [ngTemplateOutletContext]="{ td: tooltipData, tc: anotherTemplate }">
</ng-container>

<ng-template #anotherTemplate>
    <div> Here is the content I want inside of the span!</div>
</ng-template>