ネストされたコンポーネント内でデフォルト値を初期化しようとしていますが、ネイティブ 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;
}
細かいところを見逃していたと思います。