我正在尝试在嵌套组件中初始化默认值,但 native HTML 元素永远不会更新。
Root [(ngModel)]="value"
|-> Child [(ngModel)]="value"
| -> native
我已经尝试过constructor 和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 提供的双向绑定(bind)来实现: https://angular.io/guide/template-syntax#two-way-binding---
以您为榜样...
您可以简单地在父模板中使用 [(x)] 语法,而不是 [(ngModel)] 来实现与子模板的双向数据绑定(bind)。
根模板:
<child name="child" [(x)]="value"></child>
用你想要的任何名称重命名“x”(即:“myProp”、“myValue”、“y”...)
在子节点上,您必须创建一个名为 xChange 的“EventEmitter”类型的输出属性,Angular 会自动更新父属性!
子组件:
@Output xChange = new EventEmitter();
例如:如果您将“x”重命名为“myProp”,则输出属性必须是“myPropChange”
然后您需要在 child 更改值时发出() 一个事件。
子组件:
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);
}
}
关于angular - 如何在初始化期间更新嵌套 ngModel 组件中的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40244481/