Angular2 ControlValueAccessor

Question

Ich versuche zu verstehen, wie ControlValueAccessor genau funktioniert.

Ich habe das Verhalten den es mit zwei verschiedenen Steuerungskomponenten untersucht: eine einzige Nummer:

• Die erste Grundwert zu schaffen, ist wohl.
• Die zweite bieten ein komplexes Objekt.

Also kurz gesagt:

class FirstControlComponent implements ControlValueAccessor { 
    // ... 
    value:number = 10; 
    writeValue(value: number) { 
     this.value = value; 
    } 
    // ... 
} 

class SecondControlComponent implements ControlValueAccessor { 
    // ... 
    value:any = {}; 
    writeValue(value: any) { 
     this.value = value; 
    } 
    // ... 
} 

Die ControlValueAccessor Schnittstelle nur einen 'Setter' angeben: Writevalue, aber keine 'Getter'.

Also, wenn ich ein Control SecondControlComponent binden, so etwas wie:

this.form = this.builder.group({ 
    controlName: this.builder.control(this.theObject) }); 

und später in der Vorlage:

<second-component ngControl='controlName'> <second-component> 

Alles funktioniert ganz gut, weil Writevalue auf init mit einer Referenz genannt wird zu dem vorhandenen theObject-Objekt, so dass das Steuerelement die gleiche Instanz des Objekts ändern (hoffe, ich bin klar)

ABER: Wenn ich genau dasselbe mit FirstControlComponent mache, , weil der Wert nicht als Referenz übergeben wird (weil es ein Grundelement ist), und weil ControlValueAccessor keinen 'Setter' den Wert in meiner Kontrolle und den Wert in meine Hostkomponente wird NICHT synchron gehalten ...

Bedeutet das, dass wir Objekt übergeben müssen und nicht primitiv zu einem benutzerdefinierten Steuerelement, das den ControlValueAccessor implementiert? Ich rate nein, also ich denke, ich muss etwas falsch verstehen. :)

Ich benutze es richtig?

Alle Hinweise sind willkommen!

Danke!

Answer 1

Es ist mir nicht klar, was Sie hier versuchen, aber ControlValueAccessor ist eine Entität, die Sie für Ihr Element registrieren müssen. So etwas Ähnliches:

const CUSTOM_VALUE_ACCESSOR = new Provider(
    NG_VALUE_ACCESSOR, {useExisting: forwardRef(() => LabelsValueAccessor), multi: true}); 

@Directive({ 
    (...) 
    providers: [CUSTOM_VALUE_ACCESSOR] 
}) 
export class LabelsValueAccessor implements ControlValueAccessor { 
    (...) 
} 

Es wird dann einen Teil des Wert-Updates (von der Komponente und aus der Vorlage) nehmen. Wenn Sie beispielsweise innerhalb der Komponente einen Wert für die Eingabe festlegen, wird in Ihrem Wertaccessor die Methode writeValue aufgerufen. Wenn Sie den Eingabewert vom Wert Accessor aktualisieren möchten, müssen Sie

Siehe in diesem Artikel (siehe Abschnitt „NgModel-kompatible Komponente“) um weitere Informationen zu den registrierten onChange Rückruf von Angular2 nutzen:

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