我试图初始化嵌套组件中的默认值,但从不更新本机HTML元素。
Root [(ngModel)]="value"
|-> Child [(ngModel)]="value"
| -> native
我已经尝试过构造函数和ngOnInit。 AfterViewInit和AfterViewChecked抛出一个错误,在更改检测后有一个值操作。
根模板:
<child name="child" [(ngModel)]="value"></child>
儿童模板:
<select name="childSelect" [(ngModel)]="value">
子组件:
@Component({
selector: 'child',
templateUrl: './child.component.tpl.html',
providers: [
{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => ChildComponent),
multi: true
}
],
})
export class ChildComponent implements OnInit, ControlValueAccessor {
@Input() _value: number;
private _onTouchedCallback: () => void = null;
private _onChangeCallback: (a: any) => void = null;
ngOnInit() {
this.value = 1;
// this._value = 1; // no difference
}
get value(): number {
return this._value;
}
set value(value: number) {
this._value = value;
if (this._onChangeCallback !== null) {
this._onChangeCallback(this._value);
}
}
writeValue(value: any) {
this._value = value;
}
registerOnChange(fn: any): void {
this._onChangeCallback = fn;
}
registerOnTouched(fn: any): void {
this._onTouchedCallback = fn;
}
我想我错过了一个小细节。
我想你可以看到这个类似的问题:Angular 2 ngModel in child component updates parent component property
@Mark Rajcok最多投票回答:https://stackoverflow.com/a/35329533/4956569
你可以通过Angular提供的双向绑定来实现:https://angular.io/guide/template-syntax#two-way-binding---
按照你的例子......
您可以简单地使用父模板中的[(x)]语法,而不是[(ngModel)]来实现与子项的双向数据绑定。
根模板:
<child name="child" [(x)]="value"></child>
用你想要的任何东西重命名“x”(即:“myProp”,“myValue”,“y”...)
在子级上,您必须创建一个名为xChange的类型为“EventEmitter”的Output属性,Angular将自动更新父属性!
子组件:
@Output xChange = new EventEmitter();
例如:如果使用“myProp”重命名“x”,则Output属性必须为“myPropChange”
然后,每当子项更改值时,您需要发出()一个事件。
子组件:
valueChanged(value) {
this.xChange.emit(value);
}
将“valueChanged”调用到“set value()”
set value(value: number) {
this._value = value;
this.valueChanged(value);
if (this._onChangeCallback !== null) {
this._onChangeCallback(this._value);
}
}