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>

我正在子组件中设置值，但更改没有反映在父组件中

Answer 1

只是Output不能在双向数据绑定中。在有界函数的末尾也添加 ()。

(OpenScheduleCall)="YourFunctionInParent($event)"

Answer 2

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

export class ChildComponent implements OnInit {

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

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

现在你有双向绑定：

[(OpenScheduleCall)]="OpenScheduleCall"

Angular 5 从子组件更新父组件值

Angular 5 Update Parent Component value from child Component

typescript

angular-components

angular