Question

我有一个可以从父级和子级进行编辑的变量。

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

定义双绑定变量时，需要定义一个@ Input-decorator，其变量名称为：

You will get this result after drag and drop:
            <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="10"
            android:inputType="textPersonName"
            android:text="Name" />

和一个@ Output-decorator，其后带有变量名和<EditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content" android:ems="10" android:inputType="textPersonName" android:hint="hint text goes here" />，因为该变量发出变量的更改事件：

@Input() editEnabled: boolean;

然后在子组件中更改变量时，调用Change。您与@Output() editEnabledChange: EventEmitter<boolean> = new EventEmitter<boolean>();的双重绑定是正确的！

Answer 2

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

相同变量的输入和输出

2 个答案: