从嵌套组件Angular 2

Question

我有一个组件，其中* ngFor打印一些在其他组件中定义的框：

<div>
 <commponentB *ngFor="let a of list"></componentB>
</div>

其中＆＃34; list＆＃34;是这样的列表ok对象：

this.list=[{"id":"3","nome":"app3","posizione":3},{"id":"1","nome":"app1","posizione":1},{"id":"2","nome":"app2","posizione":2}];

我必须填充所有组件。如何从这两个组件传输数据？

TY

EDIT1：

问题是列表被分成2个列表，用于2个不同的bootstrap列中的重复，所以情况是这样的：

<div>
 <commponentB *ngFor="let a of list1"></componentB>
</div>
<div>
 <commponentB *ngFor="let a of list2"></componentB>
</div>

，组件就是这样：

<div>
<span>{{name}}</span>
</div>

如果我通过了所有列表，我就无法知道如何在适当的位置填充组件（对不起，如果我不能很好地解释问题）

Answer 1

由于您的组件是直接链接的，因此您可以使用@Input()组件交互将数据从父级发送到子级。

以下是官方文档中的链接：

https://angular.io/guide/component-interaction#pass-data-from-parent-to-child-with-input-binding

如果由于路由器交互而无法执行该模型，或者组件太“远”，因此设置多个输入的工作量太大，您可以使用共享服务将数据从一个组件共享到另一个组件

https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service

Answer 2

如果要将列表传递给componentB，可以在componentB中定义Input（）属性，然后传递列表

<div>
 <commponentB [list]="list"></componentB>
</div>

export class ComponentB{

@Input() list: any[];

}

更新好吧也许我没有收到您的问题，即使您必须将不同的输入传递给相同的组件，您也可以这样做。看看这个plunker：