Zwei Daten Weg für Objektbindung zwischen den Komponenten

Question

I haben mit Komponente-Eingang:

<my-input *ngIf='filter.type === checkType.INPUT_TEXT' [filter]='filter'></my-input> 

export class MyInputComponent{ 
    @Input() filter: any; 
} 

Template von MyInputComponent

<input name="name" [(ngModel)]="filter.input"> 

Ich möchte Eingangsfilter eingestellt innen und äußere Komponente Einfluss auf bezwecken.

Wie Filterobjekt in MyInputComponent übergeben, um 2-Wege-Datenbindung zu erreichen?

Ich mag wie etwas erreichen [(ngModel)] = „filter.value“ aber die Arbeit zwischen Komponenten

Weitere Beiträge hier über 2-Wege-Datenbindung does'nt Antwort auf meine Fragen.

Edit:

Nach der Verwendung von extends DefaultValueAccessor in meinem MyInputComponent meine Eltern Komponenteneingang disapears ohne Fehler.

import { Component, Input, OnInit, Provider, forwardRef } from '@angular/core'; 
import { FORM_DIRECTIVES, NG_VALUE_ACCESSOR, DefaultValueAccessor } from '@angular/common'; 

@Component({ 
    moduleId: module.id, 
    selector: 'my-input', 
    directives: [FORM_DIRECTIVES], 
    host: { '(keyup)': 'doOnChange($event.target)' }, 
    templateUrl: '<input name="name" [(ngModel)]="filter.input">' 
}) 

export class MyInputComponent extends DefaultValueAccessor { 
    @Input() filter: any; 

    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(filter:any):void { 
    if (filter !== null) { 
     super.writeValue(filter.toString()); 
    } 
    } 
    doOnChange(filter) { 
    this.onChange(filter); 
    } 
} 

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

Answer 1

Sie müssen dafür einen benutzerdefinierten Wert-Accessor implementieren. Hier ist ein Beispiel dafür:

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

@Component({ 
    (...) 
    providers: [ MY_VALUE_ACCESSOR ] 
}) 
export class MyInputComponent extends DefaultValueAccessor { 
    onChange = (_) => {}; 
    onTouched =() => {}; 

    writeValue(value:any):void { 
    if (value!=null) { 
     super.writeValue(value.toString()); 
    } 
    } 

    // call when your internal input is updated 
    doOnChange(val) { 
    this.onChange(val); 
    } 
} 

Weitere Einzelheiten finden Sie in diesem Artikel (siehe Abschnitt "NgModel-kompatible Komponente"):

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

Siehe auch diese Frage:

• angular2 wysiwyg tinymce implementation and 2-way-binding