Búsqueda de sitios web

javascript - Pasar ng-template a través de un componente


La tabla PrimeNG utiliza plantillas de cuerpo y encabezado para renderizar la tabla. He creado el componente que envuelve la tabla PrimeNG. ¿Cómo puedo pasar ng-template a través de mi componente a p-table?

Respuesta #1

La documentación de PrimeNG muestra esto muy bien. Por ejemplo.

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

Aquí puedes ver que las plantillas body y header están marcadas usando la Directiva pTemplate.
La p-table podrá capturarlas y usarlas a través de ng-container y la Directiva estructural ngTemplateOutlet.

Puedes encontrar el código fuente aquí.

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

Respuesta #2

puedes usar ng-content para pasar código HTML a tu componente

considera este código como un componente personalizado

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

y ahora lo usamos

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