web-dev-qa-db-ja.com

Angular 5子コンポーネントから親コンポーネントの値を更新

子コンポーネント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>

子コンポーネントに値を設定していますが、変更は親コンポーネントに反映されていません

angulartypescriptangular-components
7
Developer

ただOutputを双方向データバインディングに含めることはできません。また、()を制限された関数の最後に追加します。

(OpenScheduleCall)="YourFunctionInParent($event)"
3
Suren Srapyan

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"
5
AJT82