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

时间:2018-07-29 11:42:18

标签: angular

我试图通过3层来反映文本框的模型值:

parent -> child -> grand Child

但是它不起作用。我创建了一个textbox组件和一个使用addressInfo组件的textBox组件。我添加了两种方法将属性[(address)]绑定到addressInfo组件,以保存textbox的模型值。我还创建了bankDetails组件,该组件调用addressInfo组件。尽管我可以看到[(address)]组件和[(address)]组件上的addressInfo拥有正确的值,但是textBox属性不包含模型值。

我的代码:

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

@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 个答案:

没有答案