Angular-是否可以在ng-template内投影内容？

Question

说我有这个ng-template：

var elementToInsert = document.createElement("h1");
elementToInsert.textContent = "This text comes from my content script.";
document.body.insertBefore(elementToInsert, document.body.firstChild);

并且我希望能够在<!--Tooltip template wrapper--> <ng-template #toolTipWrapper let-tooltipData> <span tooltip="{{tooltipData}}" placement="bottom"> <!-- How do I get content here?--> </span> </ng-template> 内投射内容，如下所示：

<span>

有没有办法做到这一点？

如果这很重要，我正在使用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>