将链接/模板列添加到自定义表格组件

Question

我有一个基于本文构建的表组件：Creating an Angular2 Datatable from Scratch。

我一直在扩展它，所以我需要为我的应用程序（如排序和分页）做不同的事情，但有一点我不明白是如何提供某种“模板列”以允许创建诸如编辑/删除链接之类的东西。

我试图找出如何让<ng-content>在ColumnComponent工作，这样我可以在链路/ routerlink模板的方式通过，但我不明白怎么做，同程这个表是建立。

这里是我的组件的跳闸下来的版本：

Plunkr

（简化）成分，因为他们现在站在：

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

datatable.component.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); 
    } 
} 

column.component.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> 

Answer 1

我会利用ngTemplateOutlet来实现它。

您

column.component.ts

@ContentChild('tableHeaderTemplate') headerTemplate: TemplateRef<any>; 
@ContentChild('tableBodyTemplate') bodyTemplate: TemplateRef<any>; 

因此，如果我们提供它

数据表，我们现在可以使用自定义模板的头或身体来创建模板可以参考。零件。HTML

<table class="table table-striped table-hover"> 
    <thead> 
     <tr> 
     <th *ngFor="let col of columns"> 
      <ng-container *ngIf="!col.headerTemplate">{{col.header}}</ng-container> 
      <ng-template *ngIf="col.headerTemplate" [ngTemplateOutlet]="col.headerTemplate" [ngTemplateOutletContext]="{ $implicit: { header: col.header } }"></ng-template> 
     </th> 
     </tr> 
    </thead> 
    <tbody *ngFor="let row of dataset; let i = index"> 
     <tr> 
     <td *ngFor="let col of columns"> 
      <ng-container *ngIf="!col.bodyTemplate">{{row[col.value]}}</ng-container> 
      <ng-template *ngIf="col.bodyTemplate" [ngTemplateOutlet]="col.bodyTemplate" [ngTemplateOutletContext]="{ $implicit: { value: row[col.value] }, row: row }"></ng-template> 
     </td> 
     </tr> 
    </tbody> 
</table> 

最后表的定义可能是这样的：

<datatable [dataset]="photoData"> 
    <column [value]="'id'" [header]="'ID'"></column> 
    <column [value]="'title'" [header]="'Title'"> 
     <ng-template #tableHeaderTemplate let-column> 
      <span style="color: red">{{ column.header }}</span> 
     </ng-template> 
    </column> 
    <column [value]="'title'" [header]="'Actions'"> 
     <ng-template #tableBodyTemplate let-column let-row="row"> 
      <button (click)="remove(row.id)">Remove {{row.id}}</button> 
     </ng-template> 
    </column> 
</datatable> 

Plunker Example