我有一个基于本文构建的表格组件:从头开始创建 Angular2 数据表 http://4dev.tech/2016/09/creating-an-angular2-datatable-from-scratch/.
我一直在扩展它,所以做我的应用程序所需的不同事情(例如排序和分页),但我不明白的一件事是如何提供某种“模板列”以允许创建诸如编辑/删除链接。
我试着弄清楚如何获得<ng-content>
工作于ColumnComponent
这样我就可以通过这种方式传递链接/路由器链接模板,但我不知道如何使用此表的构建方式来做到这一点。
这是我的组件的简化版本:
Plunkr https://plnkr.co/edit/5iBUR11CR6B653HpgaMW?p=preview
现在的(简化的)组件:
数据表.component.html
<table class="table table-striped table-hover">
<thead>
<tr>
<th *ngFor="let column of columns">
{{column.header}}
</th>
</tr>
</thead>
<tbody *ngFor="let row of dataset; let i = index">
<tr>
<td *ngFor="let column of columns">
{{row[column.value]}}
</td>
</tr>
</tbody>
</table>
数据表.组件.ts
import { Http, Response } from '@angular/http';
import { Injectable, Component, Input, Output, EventEmitter } from '@angular/core';
import { ColumnComponent } from './column.component';
@Component({
selector: 'datatable',
templateUrl: 'src/datatable.component.html'
})
export class DatatableComponent {
@Input() dataset;
columns: ColumnComponent[] = [];
addColumn(column) {
this.columns.push(column);
}
}
列.组件.ts
import {Component, Input} from '@angular/core';
import {DatatableComponent} from './datatable.component';
@Component({
selector: 'column',
template: ``,
})
export class ColumnComponent {
@Input() value: string;
@Input() header: string;
constructor(public table: DatatableComponent) {
table.addColumn(this);
}
}
现有组件的组件标记示例
<datatable [dataset]="photoData">
<column [value]="'id'" [header]="'ID'"></column>
<column [value]="'title'" [header]="'Title'"></column>
</datatable>
所需的标记示例不一定要完全像这样,但我正在努力实现类似的目标:
<datatable [dataset]="photoData">
<column [value]="'id'" [header]="Edit">
This is a custom edit link column:
<a [routerLink]="['/edit/', id]">
<span class='glyphicon glyphicon-pencil'></span>
</a>
</column>
<column [value]="'id'" [header]="'ID'"></column>
<column [value]="'title'" [header]="'Title'"></column>
</datatable>