Angular - 有没有办法在ng-template中投影内容？

Question

说我有这个ng-template：

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