将链接/模板列添加到自定义表组件 [英] Adding a Link/Template Column to a Custom Table Component

问题描述

我根据本文构建了一个表组件:

I have a table component built based off of this article: Creating an Angular2 Datatable from Scratch.

我一直在扩展它，以便做我的应用程序需要的其他事情(例如排序和分页)，但是我不知道的一件事是如何提供某种模板列"以允许创建诸如编辑/删除链接之类的内容.

I've been extending it so do different things that I need for my app (like sorting and paging), but one thing I can't figure out is how to provide some sort of "Template column" to allow for creation of things like edit/delete links.

我试图弄清楚如何使<ng-content>在ColumnComponent中工作，以便我可以以这种方式传递链接/路由链接模板，但是我不知道如何使用此表的方式来执行此操作.内置.

I tried figuring out how to get <ng-content> to work in the ColumnComponent so that I could pass in a link/routerlink template that way, but I don't get how to do that with the way this table is built.

这是我的组件的简化版本:

Here is a tripped-down version of my components:

Plunkr

(现在)的(简化)组件:

The (simplified) components as they stand now:

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>

所需标记示例 不必完全像这样，但我正在尝试实现以下目标:

Desired Markup Example Doesn't have to be exactly like this, but I'm trying to achieve something like:

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

推荐答案

我将利用ngTemplateOutlet来实现它.

为您的可能模板创建引用

Create references to possible templates for your

column.component.ts

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

因此，如果提供了标头或正文，我们现在可以使用自定义模板

So we can now use custom template for header or body if we provided it

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

最后的表定义可能类似于:

and finally table definition might look like:

<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

这篇关于将链接/模板列添加到自定义表组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！