Angular 5更新子Component的Parent Component值

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

您尚未将其标记OpenScheduleCall为子组件的输入,因此首先您需要这样做.要在框中实现与banana相关的双向绑定,您@Output需要@Input使用后缀作为变量名称Change.首先将变量标记OpenScheduleCall为@Inputchild,然后更改@Output变量的名称:

export class ChildComponent implements OnInit {

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

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

现在你有双向绑定:

[(OpenScheduleCall)]="OpenScheduleCall"

Answer 2

EventEmitter 导入不正确。它应该从“@angular/core”而不是“events”导入。在父组件中使用 [(hidden)] 和 *ngIf 似乎是多余的。根据您的要求选择一种方法。

这是更正后的代码：

子组件 TS：

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

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)="onScheduleCall($event)"></app-schedule-call>

父组件 TS：

export class ParentComponent implements OnInit {
    // Assuming you have prospectid defined
    prospectid: any;

    // Boolean property to control visibility
    OpenScheduleCall: boolean = false;

    // Handle the event emitted by the child component
    onScheduleCall(value: boolean) {
        this.OpenScheduleCall = value;
    }
}

通过这些更改，您的子组件应该能够发出事件，并且父组件应该能够对其做出反应并相应地更新 OpenScheduleCall 属性。