Angular5 - 将ng-template父组件传递给子组件

Posted 2023-03-13

【中文标题】Angular5 - 将ng-template父组件传递给子组件

【英文标题】：Angular5 - Passing ng-template parent component to child component

【发布时间】：2018-08-03 08:13:09

【问题描述】：

这是使用primeng制作表格的原始html标签。 我认为这个 header 部分和 body 部分应该从 Parent html 注入。

[这是原始 p-table 代码]

<p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable" (onColResize)="onColResize($event)">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.fieldName">
                <span *ngIf="col.type === 'checkbox'">
                    <input type="checkbox" [(ngModel)]="checkAll" (click)="toggleCheckAll()">
                    <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                </span>
                <span *ngIf="col.type === 'text'">
                     col.caption | translate 
                    <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                </span>
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                <span *ngIf="col.type === 'checkbox'">
                    <input type="checkbox" [(ngModel)]="rowData.checkbox">
                </span>
                <span *ngIf="col.type === 'text'">
                     rowData[col.fieldName] 
                </span>
            </td>
        </tr>
    </ng-template>
</p-table>

[我把上面的代码改成了下面的代码]

     <p-table [paginator]="paginator" [rows]="paginatorRows" [columns]="cols" [value]="rows" [resizableColumns]="resizable" [reorderableColumns]="reordable" (onColResize)="onColResize($event)">
         <ng-container>
             <ng-container *ngTemplateOutlet="gridTableHeader"></ng-container>
         </ng-container>
         <ng-container>
             <ng-container *ngTemplateOutlet="gridTableBody"></ng-container>
         </ng-container>
     </p-table>

     <ng-template #gridTableHeader>
         <ng-content select=".grid-table-header"></ng-content>
     </ng-template>
     <ng-template #gridTableBody>
         <ng-content select=".grid-table-body"></ng-content>
     </ng-template>

这是父 html

<grid-table *ngIf="lower" [setting]="lower" [clickedEvent]="event">
    <div class="grid-table-header">
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" pReorderableColumn pResizableColumn [ngStyle]="col.style" [pSortableColumn]="col.fieldName">
                    <span *ngIf="col.type === 'checkbox'">
                        <input type="checkbox" [(ngModel)]="checkAll" (click)="toggleCheckAll()">
                        <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                    </span>
                    <span *ngIf="col.type === 'text'">
                         col.caption | translate 
                        <p-sortIcon [field]="col.fieldName"></p-sortIcon>
                    </span>
                </th>
            </tr>
        </ng-template>
    </div>
    <div class="grid-table-body">
        <ng-template pTemplate="body" let-rowData let-columns="columns">
            <tr>
                <td *ngFor="let col of columns">
                    <span *ngIf="col.type === 'checkbox'">
                        <input type="checkbox" [(ngModel)]="rowData.checkbox">
                    </span>
                    <span *ngIf="col.type === 'text'">
                         rowData[col.fieldName] 
                    </span>
                </td>
            </tr>
        </ng-template>
    </div>
</grid-table>

此代码没有错误，但表格数据未显示在视图中。 但我可以识别表格可以正确获取数据，因为视图中只显示分页区域。

所以我猜如果 ng-template 绑定在 p-table 标记运行之前运行，它会起作用。

但我不知道该怎么做。

你能给我一些建议吗？

【参考方案1】：

我不知道您的问题是否已经解决，但就我而言，pTemplate 标头、正文等需要位于 p-table 组件内。

另外，你需要为你的身体创建一个上下文，这是我的工作代码的 sn-p：

<p-table class="ui-g-12" [value]="rows" [rows]="pagination.pageSize" [totalRecords]="pagination.totalItems">

      <ng-template pTemplate="header">
        <ng-container *ngTemplateOutlet="columnsTemplate ? columnsTemplate : defaultHeader;"></ng-container>
      </ng-template>

      <ng-template pTemplate="body" let-rowData>
        <ng-container *ngTemplateOutlet="bodyTemplate ? bodyTemplate : defaultBody; context: $implicit: rowData"></ng-container>
      </ng-template>
</p-table>

第二个文件：

<div class="ui-g">
  <ng-template #tableColumns>
    <tr>
      <!-- Columns here -->
    </tr>
  </ng-template>
  <ng-template #tableBody let-company>
    <tr>
     <!-- Your data here -->
    </tr>
  </ng-template>
  <generic-table #table [columnsTemplate]="tableColumns" [bodyTemplate]="tableBody"></generic-table>
</div>

希望对你有帮助！

【讨论】：

没有表实例，如何处理“pSortableColumn”？

如果没有表实例，如何处理“pReorderableColumn pResizableColumn”？这两个属性都依赖于 Table 和 TableService 存在于使用上下文中这一事实

如您所见，这是一个 2 年前的问题，我真的不记得我是如何处理一些特殊情况的。抱歉没能帮到你:)

没问题，您的示例有效，因为它不访问表或表服务