Angular 4 Parent-Children组件交互

Question

也许我试图以错误的方式解决问题。我想通过父组件在两个子组件之间传输数据。

我有一个父组件（A）和两个子组件（B，C）。我想从一个孩子（B）发出一个事件并在父母（A）中处理它，然后将其内容作为输入传递给其他孩子（C）。但我不能让这个工作。我得到父（A）中的值，但是当我使用父代码下面的代码将数据传递给其他子代（B）时，输入是未定义的或零，并且事件中没有值。

 <workorders-details (pushedWorkOrderKeyEvent)="setDetails($event)"  [myinput]="($event)"></workorders-details>

我还尝试在组件中的方法setDetails（event）中为事件设置一个值，并设置[myinput] =“value”，但没有任何效果。

Answer 1

[myinput]="($event)"

这不起作用。在输出中，将值设置为某个变量并使用myinput中的变量，如

setDetails(abc){
  this.xyz = abc;
}
// and then your html
[myinput]="(xyz)"

有关输入和输出指令的基础知识，请参阅“Angular component communication by using Input Output decorator”

Answer 2

您不能将该事件参数视为模板中全局可用的事件参数，它的范围限定为您要绑定的特定输出事件。您需要编写逻辑来将输入设置为输出事件的结果：

<workorders-details (pushedWorkOrderKeyEvent)="setDetails($event)"  [myinput]="details"></workorders-details>

并在component.ts中：

setDetails(details) {
   this.details = details;
}