Question

我试图初始化嵌套组件中的默认值，但本机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;
    }

我想我错过了一个小细节。

http://plnkr.co/edit/F9pfUQ50YPV5UPiH0kw7

Answer 1

我认为您可以看到类似的问题：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>

重命名＆＃34; x＆＃34;随心所欲（即：＆＃34; myProp＆＃34;，＆＃34; myValue＆＃34;，＆＃34; y＆＃34; ......）

在孩子上，您必须创建类型＆＃34; EventEmitter＆＃34;的输出属性使用名称xChange ，Angular将自动更新父属性！

子组件：

@Output xChange = new EventEmitter();

例如：如果您重命名＆＃34; x＆＃34;用＆＃34; myProp＆＃34;输出属性必须是＆＃34; myPropChange＆＃34;

然后每当孩子更改值时，都需要发出（）事件。

子组件：

valueChanged(value) {
   this.xChange.emit(value);
}

致电＆＃34; valueChanged＆＃34;进入你的＆＃34;设定值（）＆＃34;

set value(value: number) {
   this._value = value;
   this.valueChanged(value);
   if (this._onChangeCallback !== null) {
      this._onChangeCallback(this._value);
   }
}

如何在初始化期间更新嵌套的ngModel组件中的值？

1 个答案: