Angular 5 如何从子组件更新父组件的值

Question

子组件 TS

import { Component, OnInit, Input, Output } from '@angular/core';
import { EventEmitter } from 'events';

export class ChildComponent implements OnInit {
    @Output() OpenScheduleCall = new EventEmitter<boolean>();

    onLog() {
          this.OpenScheduleCall.emit(false);
    }
}

父组件 HTML：

<div [(hidden)]="OpenScheduleCall">
// content
</div>
<app-schedule-call *ngIf="!!OpenScheduleCall" [prospectid]='prospectid'  [(OpenScheduleCall)]="OpenScheduleCall"></app-schedule-call>

我在子组件中设置了值，但是父组件没有反映出变化。

- Developer

Answer 1

您还没有将 OpenScheduleCall 标记为子组件的输入，因此首先需要这样做。为了实现双向绑定，您的 @Output 需要是 @Input 变量名称，并带有后缀 Change。因此，首先将变量 OpenScheduleCall 标记为子组件的 @Input，然后更改 @Output 变量的名称：

export class ChildComponent implements OnInit {

  @Input() OpenScheduleCall;
  @Output() OpenScheduleCallChange = new EventEmitter<boolean>();

  onLog() {
   this.OpenScheduleCallChange.emit(false);
  }
}

现在你拥有双向绑定功能：

[(OpenScheduleCall)]="OpenScheduleCall"

- AT82

---

对于刚接触这个的人需要注意：这只有在输入/输出变量名匹配且输出以Change结尾时才有效。在本例中，将输出命名为“OpenScheduleCallEvent”将不会起作用！ - FiniteLooper

@ChrisBarr，我相信我在我的答案中提到过了，或许没有表述清楚？但还是谢谢你的贡献！ :) - AT82

哈哈，你说得对 - 抱歉！我只是使用了你的代码而没有阅读你的描述，将变量名更改为我喜欢的，然后想起这个技巧并在这里发布了它。 - FiniteLooper

Answer 2

仅仅输出不足以实现双向数据绑定，还需要在被绑定的函数末尾添加()。

(OpenScheduleCall)="YourFunctionInParent($event)"

- Suren Srapyan

---

我必须设置变量值 OpenScheduleCall = false。我必须编写一个设置函数来实现这一点吗？ - Mohammad Fareed

需要从子组件获取数据。您的子组件只有 Output 参数，因此只能使用 () 进行绑定。 - Suren Srapyan

我还是很困惑，YourFunctionInParent 会在什么时候触发。你能否请帮我修改一下代码或者提供一个可行的 plnkr。 - Mohammad Fareed

当子组件中的 OpenScheduleCall 发出信号时，YourFunctionInParent 将被触发。 - Suren Srapyan