Ich versuche, etwas an eckig2 zu arbeiten, und ich kann nichts über dieses Verhalten herausfinden.
Ich habe eine Anwendung, die eine benutzerdefinierte Komponente wie diese implementiert:
%Vor% Und ich versuche, eine bidirektionale Datenbindung für meine inputText -Variable von meiner Komponente aus zu machen:
Dabei ist testString eine Variable, die in MyApp.ts definiert ist und eine Zeichenfolge enthält. Ich möchte, dass meine testString Variable geändert wird, wenn mein inputText vom Benutzer geändert wird.
Hier ist ein Plunker mit einem einfachen Beispielcode: Ссылка
Gibt es eine Möglichkeit, das einfach zu machen? Muss ich eine Angular2-Klasse für meine benutzerdefinierten Komponenten und Überladungsfunktionen implementieren, damit dies wie ein ngModel funktioniert? Muss ich unbedingt eine inputTextChanged Variable vom Typ EventEmitter erstellen, die meine Daten ausgibt, wenn sie geändert wird und so etwas wie folgt macht:
Vielen Dank im Voraus.
Dies wird in der Vorlage Syntax doc, in der Zwei-Wege-Bindung erklärt mit NgModel Abschnitt:
<input [(ngModel)]="currentHero.firstName">Intern ordnet Angular den Begriff
ngModeleiner EingabeeigenschaftngModelund einer AusgabeeigenschaftngModelChangezu. Dies ist ein spezifisches Beispiel für ein allgemeineres Muster, in dem es[(x)]mit einerx-Eingabeeigenschaft für die Eigenschaftsbindung und einerxChange-Ausgabefunktion für die Ereignisbindung übereinstimmt.Wir können unsere eigene bidirektionale verbindliche Richtlinie / Komponente schreiben, die diesem Muster folgt, wenn wir dazu in der Lage sind.
Beachten Sie auch, dass [(x)] nur syntaktischer Zucker für eine Eigenschaftenbindung und eine Ereignisbindung ist:
In Ihrem Fall möchten Sie
%Vor% Ihre Komponente muss also eine inputText -Eingangseigenschaft und eine inputTextChange -Ausgabefunktion haben (was EventEmitter ist).
Um das übergeordnete Element zu benachrichtigen, geben Sie, wenn Ihre Komponente den Wert von inputText ändert, ein Ereignis aus:
In Ihrem Szenario bindet die MyComp-Komponente die Eingabeeigenschaft inputText mit dem [(x)] -Format an ngModel. Daher haben Sie die Ereignisbindung (ngModelChange) verwendet, um über Änderungen benachrichtigt zu werden, und in dieser Ereignisbehandlungsroutine haben Sie die übergeordnete Komponente benachrichtigt die Veränderung.
In anderen Szenarien, in denen ngModel nicht verwendet wird, ist es wichtig, dass emit() ein Ereignis ist, wenn sich der Wert der Eigenschaft inputText in der MyComp-Komponente ändert.
Ich werde @pixelbits und @ Günter Zöchbauer Antworten und Kommentare kombinieren, um eine klare Antwort auf meine Frage zu geben, wenn jemand in der Zukunft danach sucht.
Damit die bidirektionale Datenbindung an benutzerdefinierten Variablen funktioniert, müssen Sie Ihre Komponente basierend auf den folgenden Komponenten erstellen:
MyComp.ts-Datei:
%Vor%MyApp.ts-Datei:
%Vor% Dort funktioniert die bidirektionale Datenbindung an die Variable inputText korrekt.
Sie können die Antwort für eine schönere oder einfachere Art, diesen Code zu implementieren, kommentieren.
Ihr Plunker enthält bereits EventEmitter . Die @Output() Annotation fehlt. Um den Wert zu ändern, rufen Sie inputTextChanged.emit(newValue) auf (dies ändert auch den Wert von inputText )
Was ich tue, ist eine Eigenschaft, also wenn ich die Daten ändere, wird die Änderung automatisch ausgegeben
%Vor%In HTML binden Sie die Eigenschaft mit [(data)]
%Vor%Tags und Links data-binding angular bidirectional