将 ng-template 传递给子组件

Question

我创建了一个可重用的组件，它将呈现 table。它目前适用于基本 tables，但在某些情况下我希望能够在 table 中自定义个人 column/cell。

这是我在父组件中使用的代码：

<!-- PARENT TEMPLATE -->
<app-table
  [headers]="headers"
  [keys]="keys"
  [rows]="rows">
</app-table>

// PARENT COMPONENT
public headers: string[] = ['First', 'Last', 'Score', 'Date'];
public keys: string[] = ['firstName', 'lastName', 'quizScore', 'quizDate'];
public rows: Quiz[] = [
  { 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
  { 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];

我在子组件中使用的代码：

<!-- CHILD TEMPLATE -->
<table>
  <thead>
    <tr>
      <td *ngFor="let header of headers">
        {{ header }}
      </td>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <td *ngFor="let key of keys">
        {{ render(key, row) }}
      </td>
    </tr>
  </tbody>
</table>

// CHILD COMPONENT
@Input() headers: string[];
@Input() keys: string[];
@Input() rows: any[];

render(key: string, row: any) {
  return row['key'];
}

我希望能够在我的父组件中声明一个模板来修改子组件中的数据。这方面的一个例子是将测验分数转换为百分比或格式化日期而不直接更改组件中的数据。我设想类似于以下内容：

<ng-template #quizScore>
  {{ someReferenceToData | percent }} // This treatment gets passed to child
</ng-template>

通过将其传递到我的子组件中，它将获取我呈现的数据并使用百分比管道对其进行格式化。我对 ngTemplateOutlet、ngComponentOutlet、ng-content 等进行了一些研究，但不确定最佳方法。

Answer 1

也许您可以在子组件中创建一个事件侦听器，并在使用 RxJS 发出格式化数据时呈现正确的数据。

Answer 2

我的建议是像这样定义一个 column 对象：

export class Column {
  header: string;
  key: string;
  type: ColumnType; // An enumerator: plain text, number, percentage, date
}

并且在您的子组件中，您可能有管道或其他函数来处理不同类型列的显示逻辑

render(type: ColumnType, row: any) {
  switch(type) {
    case ColumnType.Date: 
      // format as date
      break;  
    case ColumnType.Number: 
      // Format number to 2 decimals for example
      break;  
  }
}

Answer 3

您需要将 TemplateRefs 从您的父组件传递给您的子 (table) 组件。根据您当前的方法，一种方法是为父组件中的 @ViewChild 引用创建另一个数组，并将其传递给 table 组件。

但是，我建议通过为您的列配置创建一个接口来进行一些重构，该接口具有 header、key 和可选的 customCellTemplate。类似于：

重构

import { TemplateRef } from '@angular/core';

export interface TableColumnConfig {
  header: string;
  key: string;
  customCellTemplate?: TemplateRef<any>;
}

然后你可以简化子组件的输入

// CHILD COMPONENT
@Input() columnConfigs: TableColumnConfig[];
@Input() rows: any[];

在父组件中

您对父项中自定义单元格模板定义的设想是正确的，但您需要访问数据。

HTML

<app-table
  [columnConfigs]="columnConfigs"
  [rows]="rows">
</app-table>

<!-- name the $implicit variable 'let-whateverIwant', see below for where we set $implicit -->
<!-- double check variable spelling with what you are trying to interpolate -->
<ng-template #quizScore let-someReferenceToData>
  {{ someReferenceToData | percent }} // The parent component can do what it likes to the data and even styles of this cell.
</ng-template>

TS - 在 ngOnInit / ngAfterViewInit 生命周期挂钩

之前未定义模板引用

// PARENT COMPONENT
@ViewChild('quizScore', { static: true }) customQuizTemplate: TemplateRef<any>;

public columnConfigs: TableColumnConfiguration[];
public rows: Quiz[] = [
  { 'John', 'Doe', 0.75, '2020-01-03T18:18:34.549Z' },
  { 'Jane', 'Doe', 0.85, '2020-01-03T18:19:14.893Z' }
];

ngOnInit() {
  this.columnConfigs = [
    {key: 'firstName', header: 'First'},
    {key: 'lastName', header: 'Last'},
    {key: 'quizScore', header: 'Score', customCellTemplate: customQuizTemplate},
    {key: 'quizDate', header: 'Date'}
  ]
}

关于 static:true 与 static:false 的注意事项 - 模板引用是静态的，除非它是动态呈现的 *ngIf 或 *ngFor. static:true 将在 ngOnInit 中初始化模板引用，static:false 将在 ngAfterViewInit 中初始化它。

在子组件中

您已经在 table 中设置了嵌套的 *ngFor，但是如果有 customCellTemplate，您将需要进行一些内容投影。

<tr *ngFor="let row of rows">
  <td *ngFor="let col of columnConfigs">
    <!-- if there is no customCellTemplate, just render the data -->
    <div *ngIf="!col.customCellTemplate; else customCellTemplate">
        {{ render(col.key, row) }}
    </div>

    <ng-template #customCellTemplate>
      <!-- expose data, you could expose entire row if you wanted. but for now this only exposes the cell data -->
      <ng-template [ngTemplateOutlet]="col.customCellTemplate"
        [ngTemplateOutletContext]="{ $implicit: {{ render(col.key, row) }} }">
      </ng-template>
    </ng-template>  
  </td>
</tr>

旁注：如果可以的话，我会将 render(col.key, row) 替换为 row[col.key]。

将 ng-template 传递给子组件

Passing ng-template to child component

angular-template

angular-components

angular

重构

在父组件中

在子组件中