角度 4:带插值的动态模板

Question

我正在构建一个数据表组件，该组件被设计为非常通用的组件。

这个想法是将表定义为：

<app-datatable [items]="currentPageResult">
<app-datatable-column attribute="id"
header="ID"></app-datatable-column>
<app-datatable-column attribute="name"
header="First Name"></app-datatable-column>
<app-datatable-column attribute="last_name"
header="Last Name"></app-datatable-column>
</app-datatable>

通过这种方式，我们可以将数组指定到 datatable 组件中，并且通过定义 datatable-column，我们可以决定 witch 属性应该显示表。在内部，该表将执行一个 ngFor by 列和另一个 ngFor by 项目。

这部分很简单，现在它运行良好，当我想将自定义 html 内容放入 td 时，事情变得棘手;像这样：

<app-datatable [items]="currentPageResult">
<app-datatable-column attribute="id"
header="ID"
[template]="titleTemplate">
<ng-template #titleTemplate>
<a role="button" [routerLink]="[data.id]">
{{data.id}}
</a>
</ng-template>
</app-datatable-column>
<app-datatable-column attribute="name"
header="First Name"></app-datatable-column>
<app-datatable-column attribute="last_name"
header="Last Name"></app-datatable-column>
</app-datatable>

请注意，我使用data作为迭代变量，但它实际上不起作用，我只是在说明我想做什么。

为了解决这个问题，我使用了一个"$data"作为一个简单的字符串和一个自定义指令来将"$data"替换为相应的列/行值。

在数据表组件中，我在每个tbody td传递row数据和colum设置时使用appDatatableContent指令(该指令仅适用于列设置具有模板的情况)：

<table class="table">
<thead>
<tr>
<th *ngFor="let col of columns" [ngClass]="getColumnHeaderClasses(col)" (click)="onReorder(col)">{{col.header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of items.Items">
<td *ngFor="let col of columns" appDatatableContent [column]="col" [row]="row">
<ng-container *ngIf="!col.template; else col.template">
{{row[col.attribute]}}
</ng-container>
</td>
</tr>
</tbody>
</table>

该指令基本上会查找一个内部包含"$data"的元素，并将"$sdata"替换为相应的列值，如下所示：

ngAfterViewInit() {
if (!this.column.template) {
return;
}
const element: HTMLElement = this.element.nativeElement;
const value = this.row[this.column.attribute];
const children = element.getElementsByTagName('*');
const length = children.length;
for (let i = 0; i < length; i++) {
const currentNode = children[i];
if (!currentNode.children || !currentNode.children.length) {
const originalHTML: string = currentNode.innerHTML;
const fixedHTML = originalHTML.replace('$data', value);
currentNode.innerHTML = fixedHTML;
}
}
}

另外，请注意，每个单元格都有<ng-container *ngIf="!col.template; else col.template">因此，如果绑定了任何模板，单元格内容将呈现该模板，但问题是如何将参数(特别是行对象)传递给模板，以便模板可以使用该参数的插值。

请参阅工作弹簧机：https://plnkr.co/edit/84jhiquT5q3OQaCxTa5i

但这似乎不是最好的方法，因为我无法充分利用很多角功率，因为我只是替换了一个字符串值。

那么，如何定义可以使用迭代变量呈现自定义单元格内容的动态模板？

Answer 1

您可以使用内置指令NgTemplateOutlet轻松解决问题，该指令允许您将上下文传递给EmbeddedView(ng-template)

首先删除DatatableContentDirective

然后在 中更改标记

data-table.component.html

<td *ngFor="let col of columns">
<ng-container *ngIf="!col.template; else customTemplate">
{{row[col.attribute]}}
</ng-container>
<ng-template #customTemplate 
[ngTemplateOutlet]="col.template"
[ngTemplateOutletContext]="{ col: col, row: row }">
</ng-template>
</td>

并在父组件中使用

<ng-template #titleTemplate let-col="col" let-row="row">
<a role="button" ...>
<b>Custom</b> {{row[col.attribute]}}
</a>
</ng-template>

普伦克示例

另请参阅有关模板变量let-name的更多信息

• 角度 2 中的$implicit是什么？