angular - 同一个变量的输入和输出

Question

我有一个可以从 parent 和 child 编辑的变量。

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;
}

但我无法在两个组件之间传达 editEnabled。

我的错误在哪里？

Answer 1

当定义一个双绑定(bind)变量时，你需要用变量名定义一个@Input-decorator:

@Input() editEnabled: boolean;

和一个带有变量名和 Change 的@Output-decorator，因为它发出变量的变化事件:

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

然后当改变子组件内的变量时，调用this.editEnabledChange.emit(true)。您与 [(...)] 的双重绑定(bind)是正确的!