web-dev-qa-db-fra.com

Angular 5 Mettre à jour la valeur du composant parent à partir du composant enfant

Composant enfant 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 du composant parent:

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

Je définis les valeurs dans le composant enfant mais les modifications ne se reflètent pas dans le composant parent

angulartypescriptangular-components
7
Developer

Juste Output ne peut pas être dans la liaison de données bidirectionnelle. Ajouter également () à la fin de la fonction bornée.

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

Vous n'avez pas marqué OpenScheduleCall comme entrée pour le composant enfant, donc vous devez d'abord le faire. Et pour réaliser une liaison bidirectionnelle avec de la banane dans la boîte, votre @Output doit être le @Input nom de variable, avec le suffixe Change. Alors marquez d'abord la variable OpenScheduleCall comme @Input en enfant, puis changez le nom de @Output variable:

export class ChildComponent implements OnInit {

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

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

Vous avez maintenant une liaison bidirectionnelle:

[(OpenScheduleCall)]="OpenScheduleCall"
5
AJT82