web-dev-qa-db-fra.com

entrée et sortie pour la même variable

J'ai une variable qui peut être éditée à partir du parent et de l'enfant.

parent.html:

 <div *ngIf="editEnabled">
  <mat-icon (click)="disableEdit()">cancel</mat-icon>
</div>

<child [(editEnabled)]="editEnabled"></child>

parent.ts:

export class ParentComponent {

   editEnabled: boolean;

   disableEdit(){
     this.editEnabled = false;
   }
}

Child.html:

 <div *ngIf="!editEnabled">
  <mat-icon (click)="enableEdit()">settings</mat-icon>
</div>

child.ts

private _editEnabled: boolean;

@Input()
 set editEnabled(value: boolean) {
  this._editEnabled = value;

}
get editEnabled(): boolean {
 return this._editEnabled;
}

enableEdit(){
     this.editEnabled = true;
}

Mais je ne peux pas communiquer avec editEnabled entre les deux composants.

Où est mon erreur?

angularangular5getter-setter
11
cucuru

Lors de la définition d'une variable à double liaison, vous devrez définir un @ Input-décorator avec le nom de la variable:

@Input() editEnabled: boolean;

et un @ Output-décorator avec le nom de la variable et Change après, car celui-ci émet l'événement changeant de la variable:

@Output() editEnabledChange: EventEmitter<boolean> = new EventEmitter<boolean>();

Ensuite, lorsque vous modifiez la variable à l'intérieur du composant enfant, appelez this.editEnabledChange.emit(true). Votre double liaison avec [(...)] est correcte!

6
Giacomo Voß

Si vous ne voulez pas ajouter l'émetteur editEnabledChange- chaque fois que vous modifiez la variable correct, vous pouvez écrire:

_correct: boolean;
@Input()
set correct(val: boolean) {
  this.correctChange.emit(val);
  this._correct = val;
}
get correct() {
  return this._correct;
}
@Output()
correctChange: EventEmitter<boolean> = new EventEmitter<boolean>();
<app-pin [(correct)]="isPinCorrect"></app-pin>
0
Javan R.