代码之家 › 专栏 › 技术社区 › cucuru

同一变量的输入和输出

getter-setter angular5 angular

cucuru · 技术社区 · 6 年前

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

父级.html:

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

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

父.ts:

export class ParentComponent {

   editEnabled: boolean;

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

child.html:

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

儿童TS

private _editEnabled: boolean;

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

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

enableEdit(){
     this.editEnabled = true;
}

但我无法在两个组件之间实现editEnabled通信。

我的错误在哪里?

2 回复 | 直到 6 年前

Giacomo Voß 6 年前

定义双绑定变量时,需要用变量名定义一个@input decorator:

@Input() editEnabled: boolean;

以及一个带有变量名和 Change 之后,因为这个函数会发出变量的变化事件:

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

然后,当更改子组件中的变量时,调用 this.editEnabledChange.emit(true) . 你的双重束缚 [(...)] 是正确的!

Javan R. 6 年前

如果不想添加 editEnabledChange -每次更改变量时发射器 correct 你可以写:

_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>

推荐文章

Kiara · 根据条件角度显示多个模板

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Piotr Deja · 如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

1 年前

Ben5 · 服务器端总是接触FormControl

1 年前

allforthenoob · 我该怎么分类?

1 年前

Hamid Elouardaoui · 角度生成:发生未处理的异常:服务不再运行

1 年前

Hugh Jones · 如何创建适用于多个来源的自签名开发证书

1 年前

jthorn · 角度对象未在HTML中显示

1 年前

clem · 如何在Angular应用程序中突出显示页面的一部分?

2 年前

Kael · 在html表格中显示关系api数据-角度

2 年前