输入和输出相同的变量-Java 学习之路

我有一个可以从父母和孩子编辑的变量 .

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 .

我的错误在哪里？

2 回答

5
定义双键变量时，需要使用变量名定义一个@ Input-decorator：
```
@Input() editEnabled: boolean;
```
和一个@ Output-decorator，变量名称和 Change 之后，因为这个发出变量的变化事件：
```
@Output() editEnabledChange: EventEmitter<boolean> = new EventEmitter<boolean>();
```
然后在更改子组件内的变量时，调用 this.editEnabledChange.emit(true) . 您与 [(...)] 的双重绑定是正确的！
回复于 2024-05-05T22:50:30+08:00

如果您不想在每次更改变量 correct 时添加 editEnabledChange -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>

回复于 2024-05-05T22:50:30+08:00

输入和输出相同的变量

2 回答

相关问题