This plnker is probably the quickest way to see the issue
I'm not sure if it's just some obvious gotcha when using ViewChild but it's very strange.
The plunker is showing 3 inputs:
- The first input is a basic input and a button that can focus it.
- The second input is bound to the same value, and clicking edit will
unlock the input.
- The third input is also bound to the same value,
and clicking edit will unlock the input and give it focus.
However, when adding the ViewChild to get a reference to the input, the NgModel binding on the input stops working. But any other bindings you attach (like disabled) will still continue to function. If you comment out line 52 of app/extended.component it will bind again, but obviously now it can't focus.
The first input/button shows that this is apparently only an issue when you're binding to a property from the class you're extending.
In short, when I access the input via ViewChild my binding to NgModel breaks.
That is, given a base with property "someValue":
Binds:
@Component({
selector: 'binding-working',
template: `<input type="text" [(ngModel)]="someValue" />`
})
export class Working extends Base<string> {
constructor() { }
};
Doesn't bind:
@Component({
selector: 'binding-broken',
template: `<input type="text" #imBroken [(ngModel)]="someValue" />`
})
export class Broken extends Base<string> {
@ViewChild('imBroken') input;
constructor() { }
};
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…