4

ネストされたコンポーネント内でデフォルト値を初期化しようとしていますが、ネイティブ HTML 要素が更新されません。

Root [(ngModel)]="value"  
  |-> Child [(ngModel)]="value"
    | -> native

私はすでにコンストラクターngOnInitを試しました。AfterViewInitAfterViewCheckedは、変更検出後に値操作があるというエラーをスローします。

ルート テンプレート:

<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

4

1 に答える 1