我有很多html表共享相同的15列以及特定于每个表的自定义列.我想创建这些常见的15列作为一个组件,它接收一组数据并显示为没有包装器的15 td.我无法弄清楚如何创建一个Angular组件,它不会在DOM中显示包装器标签,并允许我传入输入.以下是我想做的事情：
<tr *ngFor="let item of items"> <td>Column 1</td> <my-common-columns [data]="item"></my-common-columns> <td>Another column</td> </tr>
不幸的是,使用上面的代码,< my-common-columns>标记显示在渲染的DOM中,这会弄乱表格.我只能在tr标签下有td.
我也试过< ng-container * ngComponentOutlet =“myCommonColumns”>因为ng-container不会出现在DOM中,但我无法弄清楚如何将数据传递给它.
解决方法
import { Component,TemplateRef,ViewChild } from '@angular/core';
@Component({
selector: 'my-common-columns',template: `<ng-template let-item>
<td>inner item1:{{item}}</td>
<td>inner item2:{{item}}</td>
</ng-template>`
})
export class CommonComponent {
@ViewChild(TemplateRef) template: TemplateRef<any>;
}
@Component({
selector: 'my-app',template: `
<table>
<tr *ngFor="let item of data">
<td>first</td>
<ng-template [ngTemplateOutlet]="common.template"
[ngTemplateOutletContext]="{$implicit: item}">
</ng-template>
<td>last</td>
</tr>
</table>
<my-common-columns #common></my-common-columns>
`
})
export class AppComponent {
data = [1,2,3,4,5];
}
结果：
