web-dev-qa-db-ja.com

同じ変数の入力と出力

親と子から編集できる変数があります。

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

しかし、2つのコンポーネント間でeditEnabledを通信できません。

私の間違いはどこですか？

angularangular5getter-setter
11
cucuru

二重バインドされた変数を定義するとき、変数名で1つの@ Input-decoratorを定義する必要があります。

_@Input() editEnabled: boolean;
_

変数名とその後ろにChangeが付いた1つの@ Output-decorator。これは、変数の変更イベントを発行するためです。

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

次に、子コンポーネント内の変数を変更するときに、this.editEnabledChange.emit(true)を呼び出します。 [(...)]を使用した二重バインディングは正しいです！

6
Giacomo Voß

変数editEnabledChangeを変更するたびにcorrect- Emitterを追加したくない場合は、次のように記述できます。

__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.