Question

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

怎么做？

Answer 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

另见

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

1 个答案: