通過組件傳遞ng-template

Question

PrimeNG Table使用正文和標題模板來呈現表。 我創建了包裝PrimeNG表的組件。 如何通過組件將ng-template傳遞給p-table？

Answer 1

PrimeNG 文檔很好地顯示了這一點。 例如

<p-table [value]="cars">
    <ng-template pTemplate="header">
        <tr>
            <th *ngFor="let col of cols">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-car>
        <tr>
            <td *ngFor="let col of cols">
                    {{car[col.field]}}
            </td>
        </tr>
    </ng-template>
</p-table>

在這里，您可以看到主體模板和標題模板是使用pTemplate指令標記的。
p-table將能夠通過ng-container和結構性指令ngTemplateOutlet拾取並使用它們。

您可以在此處找到源代碼。

@ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate>;

Answer 2

您可以使用ng-content將html代碼傳遞到您的組件

將此代碼視為自定義組件

<div> 
 <ng-content> </ng-content>
</div>

現在我們用它

<custom-component>
whatever is written here will be placed where ng content is 
</custom-component>