Angular

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>

有办法吗？

如果重要的话，我正在使用 Angular7。

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>

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

Angular - Is there a way to project content inside of ng-template?

templates

angular2-template