如何在自定义表组件中的TableCell中呈现组件

Question

我编写了一个Table组件，允许传递Table将呈现的标题和行列表。这一切都很好，甚至允许通过$sce传递基本HTML，但有时我需要传入一个组件或指令来在单元格内呈现。 我该怎么做？

我希望在TableCell中呈现的组件示例

<group-display groups="item.listOfGroups"></group-display>

以下是Table组件的工作原理。

Table.html （我删除了一些样式代码和类）

<div class="table-head">
    <div ng-repeat="header in $ctrl.headers">
        {{header.title}}
    </div>
</div>

<div class="table-row" layout="row" ng-repeat="row in $ctrl.displayRows">
    <div ng-repeat="cell in row.cells"
         ng-bind-html="cell.contents"></div>
</div>

界面定义

export interface ITableHeader {
    title: string;
    width?: number;
    className?: string;
    sortable?: boolean;
    sortType?: TableSortType
}

export interface ITableRow {
    cells: ITableRowCell[];
}

export interface ITableRowCell {
    contents: string;
    sortString?: string;
    data?: any;
}

如何从父组件调用组件

<table headers="$ctrl.tableHeaders"
            rows="$ctrl.tableRows"
            show-search="true"
            search-placeholder="Task Schedules"></table>

如何从父组件定义行和单元格

this.tableRows = [
    {
        cells: [
            { contents: this.$sce.trustAsHtml("<div class='vehicle-reg'>GG65</div>"), sortString: "GG65" },
            { contents: "Abc Type" },
            { contents: this.dateService.formatDate(moment().add(-1, "d")), data: moment().add(-1, "d") },
            { contents: this.dateService.formatDate(moment().add(2, "d")), data: moment().add(2, "d") },
            { contents: "11", data: 11 }
        ]
    },
    {
        cells: [
            { contents: this.$sce.trustAsHtml("<div class='vehicle-reg'>AA12</div>"), sortString: "AA12" },
            { contents: "Def Type" },
            { contents: this.dateService.formatDate(moment().add(-2, "d")), data: moment().add(-2, "d") },
            { contents: this.dateService.formatDate(moment().add(1, "d")), data: moment().add(1, "d") },
            { contents: "22", data: 22 }
        ]
    }
];