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>