如何将/ project转换为循环内的插槽,并使投影内容能够访问循环变量?
假设我有一个基本组件,包含以下内容
<tr *ngFor="let data of items">
<td>{{data.title}}</td>
<ng-content select="[slot]"></ng-content>
</tr>
使用翻译位的子组件&#34; slot&#34;
<parent [items]="items">
<ng-container slot>
<td>{{data.category}}</td>
<td>{{data.number}}</td>
</ng-container>
</parent>
我想生成的HTML是
<tr>
<td>{{data.title}}</td>
<td>{{data.category}}</td>
<td>{{data.number}}</td>
</tr>
但实际发生的是&#34;数据&#34;没有在子组件中定义,这是有道理的。有什么方法可以让它像这样工作吗?
答案 0 :(得分:2)
使用TemplateRef
可以在模板级别声明性地声明在两个组件之间起作用的模板变量。以下解决方案与您的“插槽”基础架构不完全匹配,但可能对进一步调查有用。
<强> list.component.ts 强>
import { Component, Input, ContentChild, TemplateRef } from '@angular/core';
@Component({
selector: 'list',
template: `
<tr class="box" *ngFor="let data of items">
<td>{{data.title}}</td>
<ng-template
[ngTemplateOutlet]="template"
[ngTemplateOutletContext]="{ $implicit: data }">
</ng-template>
</tr>`
})
export class ListComponent {
@Input() items;
@ContentChild(TemplateRef) template: TemplateRef;
constructor() { }
}
<强> wrapper.component.ts 强>
import { Component, ContentChild, TemplateRef } from '@angular/core';
@Component({
selector: 'wrapper',
template: `
<table>
<list [items]="items">
<ng-template let-data>
<td>{{data.category}}</td>
<td>{{data.number}}</td>
</ng-template>
</list>
</table>`
})
export class WrapperComponent {
items = [
{ title: 'T1', category: 'C1', number: 'N1' },
{ title: 'T2', category: 'C2', number: 'N2' },
{ title: 'T3', category: 'C3', number: 'N3' }
];
@ContentChild(TemplateRef) template: TemplateRef;
constructor() { }
}
我还创建了一个Plunker demo ...