Angular 4 父子组件交互答案

【问题标题】：Angular 4 Parent-Children component interactionAngular 4 父子组件交互
【发布时间】：2017-10-31 16:06:25
【问题描述】：

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

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

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

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

【问题讨论】：

标签： angular

【解决方案1】：

[myinput]="($event)"

这是行不通的。在您的输出中，将值设置为某个变量并在 myinput 中使用该变量，例如

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

【讨论】：

【解决方案2】：

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

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

在component.ts中：

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

【讨论】：

他说I have also tried to set a value to event in method setDetails(event) in the component and set [myinput]="value", but nothing works.
是的，可能，他至少应该分享setDetails方法的代码