Angular 4 父子组件互动

Question

也许我正在用错误的方法解决问题。 我想通过父组件在两个子组件之间传输数据。我有一个父组件（A）和两个子组件（B，C）。我想从一个子组件（B）发出事件并在父组件（A）中处理它，然后将其内容作为输入传递给另一个子组件（C）。但是我无法做到这一点。我能在父组件中获取值，但当我在父组件中使用以下代码传递数据到其他子组件（B）时，输入为未定义或为零，并且事件中没有值。

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

我还尝试在组件中的setDetails(event)方法中给事件赋值，并设置[myinput] =“value”，但是没有起作用。

- joakimja

---

请提供一个 [mcve]。 - jonrsharpe

Answer 1

[myinput]="($event)"

这样做行不通。在你的输出中，将值设置为某个变量，并在 myinput 中使用该变量。

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

关于输入和输出指令的基础知识，请参见“使用Input Output装饰器进行Angular组件通信”

- Ali Adravi

Answer 2

您不能像全局变量一样在模板中使用 $event 参数，它仅限于绑定的特定输出事件中。您需要编写逻辑来将输入设置为输出事件的结果：

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

并且在 component.ts 文件中：

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

- bryan60

---

他说：“我也尝试在组件的setDetails(event)方法中设置事件的值，并设置[myinput] =“value”，但什么都不起作用。” - komron

是的，可能他至少应该分享“setDetails”方法的代码。 - komron