angular - 在数据网格中的兄弟组件之间共享数据

Question

如何在兄弟组件之间传递数据？假设我有一种如下所示的数据输入网格：

<tr *ngFor="let item of frm.controls.items.controls; let i=index" [formGroupName]="i">
   <td><input type="text" formControlName="id" /></td>
   <td><input type="text" formControlName="name" /></td>
</tr>

比方说，有一些打字稿会被触发valueChanges或触发focusout处理在每个字段中输入的数据的事件。我的问题是，如果我需要访问该领域id的焦点数据name。我怎样才能做到这一点？

onNameFocusout = function(nameControl) {
  //get a handle of id control for the ROW that this name control belongs to

所以我只能访问name某行的控件，我需要id同一行的控件。

我可以想到几种不同的方法来做到这一点：

1. 在name控件的html中，在focus out事件中传递id控件。就像是<input type="text" formControlName="name" onNameFocusout="(frm.controls.items.controls[i].controls.id, frm.controls.items.controls[i].controls.name)" />

2. 使用数据共享服务。在网格中输入的任何值也可用于数据共享服务，以供任何组件检索。这仍然需要知道要从中检索数据的行的索引。

有关如何以更好的方式完成此操作的任何建议，或者这些方法中的任何一种都应该可以正常工作。

谢谢

Answer 1

您应该能够获得模糊值：

模板：

<tr *ngFor="let item of frm.get('items'); let i=index" [formGroupName]="i">
   <td><input type="text" formControlName="id" /></td>
   <td><input type="text" (blur)="onBlur(frm.get('items.' + i + '.id'))" formControlName="name" /></td>
</tr>

组件类：

onBlur(control: FormControl) {
   let value = control.value;
   // value = value of id
}