孙子和父组件之间的两种绑定方式

时间:2018-07-26 12:34:12

标签: angular

我试图通过3层(父级->子级->大子级)来反映模型值,但是我做不到。 我创建了一个文本框组件。 和一个使用textBox组件的addressInfo组件。我添加了两种方式绑定属性。 [(address)]到addressInfo组件以保存模型值。 并创建了使用addressInfo组件的bankDetails组件。现在,当我将[[address)]添加到模型的值时,不会反映到其模型中。即使我可以看到addressInfo组件上的[(address)}和textBox组件上的ngModel都具有正确的值

可以帮忙吗?

注意:实际上,我的问题与github上的问题#7645相反

my code:
textBox.ui.html:
<input #hTextBox
      [(ngModel)]="value"
    />
textBox.ui.ts:

private _value: string;
@Input()  get value(): string {
return this._value;
}
set value(val) {
if (this._value === val) return;
this._value = val;
this.valueChange.emit(val);

if (val.length == 0)
  this.showViewPassword = false;
else
  this.showViewPassword = true;
}


@Output() valueChange = new EventEmitter();

addressInfo.component.html: 

<h-textBox [disabled]="disabled" [(value)]="poBoxNum" [required]="required"> 
 </h-textBox>

addressInfo.component.ts:

//private _poBoxNum: string;
//@Input() get poBoxNum(): string {
//  debugger;
//  return this._poBoxNum;
//}
//set poBoxNum(val) {
//  debugger;
//  if (this._poBoxNum === val) return;
//  this._poBoxNum = val;
//  this.valueChange.emit(val);
//}

//@Output() valueChange = new EventEmitter();

bankDetails.component.html:

 <address-info [disabled]="disabled"
                     [(poBoxNum)]="poBoxNum">                  
        </address-info>

bankDetails.component.ts:
poBoxNum: string= "555" ;

0 个答案:

没有答案