Hören eines Modells in Komponente Winkel 2

Question

Ich benutze Winkel 2. Ich habe ein Szenario, wo ich eine Komponente, Schnittstelle und Direktive haben.

Diese Direktive wird für Autosuggestions verwendet und meine Schnittstelle wird als Modell verwendet.

Also, wenn der Benutzer einen Wert auswählt, aktualisiere ich das Modell und gibt es eine Möglichkeit, wo meine Komponente auf die Modelländerungen hören wird.

directive - model - component interaction

wie wird die Komponente auf die Modelländerungen hören, die ich Richtlinie mache durch? Kann auch ein Modell verwendet werden, um die Daten zu halten?

Answer 1

Verwenden Eingänge, Ausgänge und verbindlich wie:

(nicht wirklich eine automatische Vervollständigung, aber es sollte Ihnen den Einstieg)

@Component({ 
    selector: 'auto-complete', 
    template: ` 
    <select [(ngModel)]="value" (ngModelChange)="valueChange.emit($event)"> 
    <option *ngFor="#val of values" [value]="val">{{val}}</option> 
    </select>`}) 
export class AutoCompleteComponent { 
    @Input() values:string[]; 
    @Output() valueChange:EventEmitter<string> = new EventEmitter<string>(); 
    value:string; 
} 

@Component({ 
    selector: 'parent', 
    directives: [AutoCompleteComponent], 
    template: ` 
<auto-complete [value]="options" (valueChange)="onUpdate($event)"></auto-complete> 
`}) 
export class AppComponent { 
    options = ['a', 'b', 'c', 'd', 'e']; 
    onUpdate(event) { 
    console.log(event); 
    } 
}