关于 angular:Component 与 ngFor 接受模板并将其传递给孩子，怎么做？

Component with ngFor that accept template and pass it to the children, how to do it?

我正在开发一个 Angular 6 应用程序。
我有一个组件 BelloComponent 呈现在 @Input 项目上传递的列表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@Component({
selector: 'bello',
template: `
<ul *ngIf="items?.length">
<li *ngFor="let item of items">
???

</li>

</ul>

`
})
export class BelloComponent {
@Input() items: Array<Object>;
}

而消费者，AppComponent 使用 BelloComponent。
如何将列表从 AppComponent 中传递给 BelloComponent 标签内的模板？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@Component({
selector: 'my-app',
template: `
<bello [items]="cacche_list">
{{ name }}, puzza value: {{ puzza }}
</bello>`
})
export class AppComponent {

cacche_list = [
{ name: 'cacca 1', puzza: 3 },
{ name: 'cacca 2', puzza: 5 },
{ name: 'cacca 3', puzza: 66 },
{ name: 'cacca 4', puzza: 5 },
{ name: 'cacca 5', puzza: 2 },
{ name: 'cacca 6', puzza: 12 },
];
}

stackblitz 是这样的：https://stackblitz.com/edit/angular-exbhsv?file=src/app/app.component.ts

我想我错过了一些东西，如何告诉 BelloComponent 如何在 ngFor 中渲染元素？如何访问从 AppComponent 呈现的单个项目？

使用嵌入你可以这样处理它

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

@Component({
selector: 'bello',
template: `
<ul *ngIf="items?.length">
<li *ngFor="let item of items">
<ng-container *ngTemplateOutlet="liTemplate; context: { $implicit: item}"></ng-container>

</li>

</ul>

`
})
export class BelloComponent {
@ContentChild(TemplateRef) liTemplate: TemplateRef;
@Input() items: Array<Object>;
}

在你的容器组件中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

@Component({
selector: 'my-app',
template: `
<bello [items]="cacche_list">
<ng-template let-item>
{{ item.name }}, puzza value: {{ item.puzza }}
</ng-template>
</bello>`
})
export class AppComponent {

cacche_list = [
{ name: 'cacca 1', puzza: 3 },
{ name: 'cacca 2', puzza: 5 },
{ name: 'cacca 3', puzza: 66 },
{ name: 'cacca 4', puzza: 5 },
{ name: 'cacca 5', puzza: 2 },
{ name: 'cacca 6', puzza: 12 },
];
}

有关更多信息，请参阅此博客 https://www.kaels-kabbage.com/post/angular-transclusion-with-parameters/

你可以简单地在bello组件中使用<ng-content></ng-content>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

@Component({
selector:"bello",
template: `
<ul *ngIf="items?.length">
<li *ngFor="let item of items">
<ng-content></ng-content>

</li>

</ul>

`
})
export class BelloComponent {
@Input() items: Array<Object>;
}

唯一缺少的是 ngFor

中的 {{item.name}}

1
2
3
4
5
6
7
8

演示