如何通过angular 2中的父组件将自定义（html）模板传递给子组件？

【问题标题】：How to pass a custom (html) template to child component via parent component in angular 2?如何通过angular 2中的父组件将自定义（html）模板传递给子组件？
【发布时间】：2017-03-13 19:47:24
【问题描述】：

        <grid
            [data]="sortedDeviceList"
            [multiSelect]="false"
            [enableSort]="true"
            [rowTemplate]="">
        </grid>

我想将 HTML 模板传递给 rowTemplate 属性。模板将如下所示。

<div> 
 <div>{{item.id}}</div>
 <div>{{item.name}}</div>
</div>

网格模板看起来像这样。

<div *ngFor="let item in data">
// template should appear here.
</div>

如何做到这一点？

【问题讨论】：

标签： angular

【解决方案1】：

@Component({
  selector: 'grid'
  template: `
<div *ngFor="let item in data" *ngForTemplate="templateRef" *ngOutletContext="{$implicit: data}">
</div>`
})
export class GridComponent {
  @Input() data:any[];
  constructor(private templateRef:TemplateRef) {}
}

并像使用它

<template #myTemplate>
  <div> 
   <div>{{item.id}}</div>
   <div>{{item.name}}</div>
  </div>
</template

另见

【讨论】：