如何通过角度2中的父组件将自定义(html)模板传递给子组件? [英] How to pass a custom (html) template to child component via parent component in angular 2?

问题描述

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

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

I want to pass a HTML template to the rowTemplate property. And the template will look like this.

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

网格模板看起来像这样.

The grid template look likes this.

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

该怎么做?

推荐答案

@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

另请参阅

• Angular2子组件作为数据
• 如何在Angular2中将表达式作为输入传递给组件?

这篇关于如何通过角度2中的父组件将自定义(html)模板传递给子组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！