ngModel in benutzerdefinierten Komponente Arbeit nur einen Weg

Question

Lets sagen, ich habe eine Komponente

const DEFAULT_VALUE_ACCESSOR = CONST_EXPR(new Provider(
NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => MyComp), multi: true})); 

@Component({ 
selector: 'my-comp', 
    template: ` 
    <another-one></another-one> 
    `, 
    providers: [DEFAULT_VALUE_ACCESSOR] 

und jetzt, wenn ich die Komponente wie:

@Component({ 
selector: 'app', 
template: `<my-comp [(ngModel)]="someValue"></my-comp> 
     <input [(ngModel)]="someValue" />` 
}) 
class App { 
    someValue: number = 5 
} 

Der Wert der <my-comp> Komponente übergeben wird, jedoch Wenn danach der Wert innerhalb der Eingabe geändert wird, wird ngModel aktualisiert, aber nicht <my-comp>. Gibt es noch etwas, das ich konfigurieren muss?

Answer 1

In der Tat, müssen Sie explizit den onChange Rückruf nennen, die registriert wird von Angular2:

@Component({ 
    (...) 
}) 
export class MyComp implements ControlValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value: any): void { 
    (...) 
    } 

    registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } 
    registerOnTouched(fn:() => void): void { this.onTouched = fn; } 
} 

Zum Beispiel, wenn Sie bedenken, dass sich der Status dieser benutzerdefinierten Komponente ändert. Hier ist ein Beispiel auf einem Klick:

@Component({ 
    (...) 
    template: ` 
    <div (click)="updateState()">Update state</div> 
    ` 
}) 
export class MyComp implements ControlValueAccessor { 

    writeValue(value: any): void { 
    this.internalState = value; 
    } 

    updateState() { 
    this.internalState = 'new state'; 
    this.onChange(this.internalState); 
    } 
} 

Dieser Artikel könnten Sie weitere Hinweise (siehe Abschnitt "NgModel-kompatible Komponente" sehen):

• http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/

Answer 2

ngOnChanges() wird aufgerufen, wenn @Input() s Werte ändern:

@Component({ 
selector: 'my-comp', 
    template: ` 
    <another-one></another-one> 
    ` 
}) 
class MyComp { 
    @Input() someField:number; 

    ngOnChanges(changes) { 
    console.log(changes); 
    } 
} 

und jetzt, wenn ich die Komponente wie verwenden:

@Component({ 
selector: 'app', 
template: `<my-comp [someField]="someValue"></my-comp> 
     <input [(ngModel)]="someValue" />` 
}) 
class App { 
    someValue: number = 5 
}