將鏈接/模板列添加到自定義表格組件

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