Nach dem Leitfaden von der Angular2 Seite habe ich diesen html:
%Vor%mit diesem Controller:
%Vor% Wenn der Benutzer eine Eingabe in die Eingabe eingibt, löscht die Methode doneTyping die Eingabe mit $event.target.value = null; .
Allerdings kann ich nach dem Drücken des Knopfes nicht mit dem gleichen Verfahren kommen.
Sie können die Eingabe als Parameter in der Schaltfläche
übergeben %Vor% Und später in der Funktion add
Außerdem möchten Sie normalerweise vermeiden, so viel wie möglich mit DOM zu interagieren. Ich habe gerade das App der Todo-App auf dem gitub angular2 überprüft und sie greifen auch auf das DOM-Element zu, aber das letzte echte Commit ist 2 Monate alt.
Wenn Sie Datenbindung verwenden, können Sie einen saubereren Code haben, der etwas wie folgt ergeben würde:
%Vor% Dann können Sie in Ihrer Klasse einfach das Mitglied _newStuff : string definieren, das Sie addStuff wie folgt implementieren können:
In den meisten Fällen möchten Sie, dass _newStuff ein Modellobjekt ist, das wie folgt funktioniert:
%Vor% Und dann wäre dein _newStuff _newStuff : Stuff; und du könntest es wie folgt abbilden: <input [value]="_newStuff.property" (keyup.enter)="addStuff()"> .
Ich weiß, dass Ihr Beispielcode sehr einfach ist und Sie versuchen, ihn zum Laufen zu bringen, aber ich glaube, dass die Datenbindung mehr in der Logik des Frameworks liegt und die Form API im Grunde Tools wie Control, ControlGroup und FormBuilder, mit denen Sie Ihr Modell in Ihrer Ansicht mit Validatoren und ähnlichem abbilden können. Bei etwas größerem Aufwand wäre es zu umständlich, auf das DOM zuzugreifen, wenn Sie die Ansicht ändern müssen. Am Ende ist Ihr Beispiel fast rohe Javascript in einem Angular2-Kontext ausgeführt.
Wenn Sie nun zu Ihrem Beispiel zurückkommen, stellen Sie sich vor, Sie hätten ein anderes Ereignis, das ein neues Objekt hinzufügt, sagen Sie einen Doppelklick oder so. Sie müssten eine weitere Methode hinzufügen, die dieses Ereignis behandelt, und das HTMLInputElement erneut übergeben. und tun Sie im Prinzip dasselbe wie beim Keyup-Event-Handler, wodurch Sie den Code erneut duplizieren. Mit der Datenbindung besitzt Ihre Komponente den Status der Ansicht und Sie können daher eine einfache Methode verwenden, die nicht von der Art des ausgelösten Ereignisses beeinflusst wird. Dort können Sie den Test durchführen, wenn das Modell gültig ist (obwohl Sie dafür die Formular-API verwenden würden).
Wie dem auch sei, ich weiß, dass dies bereits beantwortet wurde, aber ich dachte, dass ich nur helfen würde, die Lösung zu verbessern, wenn ich mein jetziges Verständnis davon verstehe und wie es auf reale Fälle angewendet werden könnte.
Sie können eine Bindung in einer Richtung verwenden, um auf den Wert der Eingabe zuzugreifen. Dies ist eine sehr klare Architektur; Sie müssen keine DOM-Elemente an den Controller übergeben.
Vorlage:
%Vor%Controller:
%Vor%Tags und Links javascript angular