我正在尝试创建一个模块化表。
为此,我使用模板引用和ng容器。
我做了这个堆叠闪电战,这很简单:
https://stackblitz.com/edit/angular-2xhely
运行时,提示错误
TypeError:templateRef.createEmbeddedView不是函数
我已经上网了一段时间,但似乎找不到解决我问题的方法。
这是相关的代码。
import { Directive, Input, TemplateRef } from '@angular/core';
@Directive({ selector: '[template]' })
export class TemplateDirective {
@Input() template: string;
constructor(public templateRef: TemplateRef<any>) { }
}
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<app-table [data]="data">
<ng-template template="body" let-item>
<td>{{item.id}}</td>
<td>{{item.nom}}</td>
</ng-template>
</app-table>`,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
data = [{ id: 1, nom: 'Max' }];
}
import { Component, OnInit, Input, ContentChildren, QueryList } from '@angular/core';
import { TemplateDirective } from './template.directive';
@Component({
selector: 'app-table',
template: `
<table>
<thead>
<td>ID</td>
<td>NOM</td>
</thead>
<tbody *ngIf="template">
<ng-container *ngFor="let item of data">
<ng-container *ngTemplateOutlet="template; context: { $implicit: item }">
</ng-container>
</ng-container>
</tbody>
</table>
`,
styleUrls: ['./table.component.css']
})
export class TableComponent {
@Input() data: any[];
@ContentChildren(TemplateDirective) templates: QueryList<any>;
template: TemplateDirective;
ngAfterContentInit() {
this.template = this.templates.first.template;
}
}
我尝试将模板放在表选择器的外部,并将其作为表的输入内容提供,这似乎可行。难道您不能使用有内容的孩子这样做吗?
答案 0 :(得分:0)
如果将TableComponent更新为此,它将起作用。希望这能解决您的问题。
<table>
<thead>
<td>ID</td>
<td>NOM</td>
</thead>
<tbody *ngIf="template">
<tr>
<ng-container *ngFor="let item of data"
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{ $implicit: item }">
</ng-container>
</tr>
</tbody>
</table>
<ng-template #template let-item>
<td>{{item?.id}}</td>
<td>{{item?.nom}}</td>
</ng-template>