在Angular 2的OnInit中，ngModel绑定为空

Question

我在使用Angular 2ngModel绑定时遇到了一个问题。plnkr公司

如果我使用ngModel将值绑定到子组件，则该值不会填充到子组件的OnInit函数上。因此，如果我绑定到一个属性调用“边界名称”，并尝试在OnInit中访问它，它将为空。但是，如果我不使用ngModel而是使用输入参数将其绑定到父控件中的相同值，则可以在OnInit函数中访问该值。

因此..如果我的父组件创建了一个子组件

 <my-boundcomp [(ngModel)]="name" [(inputName)] ="name" ></my-boundcomp>

我在Init函数上子组件是

public ngOnInit() {
   console.log("Input Name :" + this.inputName);
   console.log("Bound Name :" + this.boundName);
   this._boundNameOnInit = this.boundName; // <--- Going to be null
   this._inputNameOnInit = this.inputName; // <--- Going to be not null

}

我发现这种行为很奇怪，而且出乎意料。我不确定这是一个错误还是我没有正确使用FormsModulengModel，但足够有趣，我认为我应该分享。

这是完整的 plnkr https://plnkr.co/edit/Im5oz7q1HhG5MgGTTZ1R?p=preview

Answer 1

我认为，如果在使用ControlValueAccessor时依赖于通过writeValue设置的值，这是一个“问题”。由于设置了boundName并且ngOnInit是首先触发的事件之一，所以writeValue还没有机会运行。

我尝试在其他一些生命周期钩子（AfterViewInit、AfterContentInit）上添加这个，现在还为时过早。事实上，如果您将边界名称默认为“”或其他内容，您会注意到在AfterViewInit或AfterContentInit中，它实际上在调用写值之前被空掉了。

出于这个原因，我建议在写值方法中设置您的值。如果您需要只设置一次，您可以使用标志。请参阅下面的代码…

export class BoundValueComponent  implements OnInit, ControlValueAccessor {

@Input() inputName: string;
boundName: string;

private _boundNameOnInit : string;
private _inputNameOnInit : string;

private initialized: boolean = false;

private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;

constructor() {
}

public ngOnInit() {
   console.log("Input Name :" + this.inputName);
   console.log("Bound Name :" + this.boundName);
  // this._boundNameOnInit = this.boundName; // <--- Going to be null
   this._inputNameOnInit = this.inputName; // <--- Going to be not null
}

get value(): any {
  return this.boundName;
};

/**
* Set accessor including call the onchange callback.
*/
set value(v: any) {
  if (v !== this.boundName) {
     this.boundName = v;
     this.onChangeCallback(v);
  }
}

/**
* From ControlValueAccessor interface.
*/
writeValue(value: any) {
 this.boundName = value;

 if (!this.initialized) {
   this._boundNameOnInit = this.boundName;
   this.initialized = true;
 }
}
.......

Answer 2

这个代码

[(ngModel)]="name"

将OnInit中的NgModel的值设置为BoundValueComponent的值。当从NgModel调用BoundValueComponent.write值时，则设置边界名称。

我很确定这是设计好的。