Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Angular 2 Grundkurs

Services via DI einbinden

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Jeder Injector erzeugt eine Singleton-Instanz eines Services bei einer DI. Welche Besonderheiten das zur Folge hat, verrät dieser Film.
06:60

Transkript

Wie wir ein Service erstellen können, haben wir mittlerweile gelernt. In diesem Video möchte ich euch zeigen, wie wir den erstellten Service jetzt einbinden. Damit ich das Ganze jetzt realisieren kann, ist das Erste, was ich tun muss, den Service als Provider anzukündigen und hierfür wechsle ich jetzt einfach in mein User-Modul und im User-Modul selbst kann ich ein Provider in der Form einfach definieren, indem ich einfach die Eigenschaft "providers" verwende. Und "providers" erwartet jetzt eben die Services, die entsprechend zur Verfügung gestellt werden sollen, innerhalb der Applikation, das heißt, hier ist es so, dass ich den "UserService" mir dann schnappe. Der UserService ist somit Mitglied des Providers und dementsprechend auch Bestandteil des Injektors. Ich muss den UserService hier nicht exportieren. Bitte bedenkt, dass alles was ihr als "providers" definiert, automatisch innerhalb des AppModuls dann entsprechend auch zur Verfügung gestellt wird, in den providers. Das heißt, es ist tatsächlich so, dass dann ein globaler Injektor existiert und in diesem Injektor sind alle Singleton-Instanzen dieses User-Services. Würde ein anderes Modul beispielsweise hier ebenfalls ein providers definieren, das auch UserService zum Beispiel durch Zufall hat, dann braucht ihr euch auch hier keine Sorgen machen, es ist immer noch ein Injektor des Applikationsmoduls. Dabei gibt es nur eine einzige Ausnahme und das ist es, wenn ihr über lazy-loading-Module ladet und Routings ladet, aber das ist nicht Bestandteil des Grundlagenkurses und dementsprechend brauchen wir uns hier keine Sorgen machen. Okay. Nachdem wir nun userService hier als Provider definiert haben, müssen wir im letzten Schritt im Grunde genommen nur noch dafür sorgen, dass wir uns den userService hier schnappen und dann wechseln wir wieder in die app.component und in der app.component werden wir jetzt innerhalb des Konstruktors um diese Instanz des userServices bitten, das dann aus dem Injektor als Singleton zurückgegeben wird. Das ist der "userService" vom Typ "UserService". Ich mach hier eine code completion. Die code completion sorgt dann automatisch dafür, dass der Import hier oben erscheint. Sollte euer Editor das nicht unterstützen, macht das bitte unbedingt. Wenn ihr den Service jetzt hier habt, könnt ihr diesen jetzt anschließend benutzen, um zum einen den selektierte User im localStorage zu sichern, und zum anderen den selektierten User, der im localStorage gesichert war, hier im Konstruktor zu recyceln, um beim Reload den selektierten User wieder zu markieren. Welche Methoden gab es dafür nochmal? Im UserService gab es die Methode "setSelectUser", um den User zu sichern, innerhalb des localStorage und "getSelectUser", um ihn entsprechend wieder abzufragen. Beginnen wir damit, dass wir das Ganze speichern. Da werden wir aber ein wenig TypeScript-Magic benutzen, denn in diesem Parameter hier benutze ich jetzt einfach "private" vorab. Und wenn ich "private" hier benutze, hat das folgende Bewandtnis. Ich bin ab jetzt in der Lage, wenn das als "private" definiert ist, dass ich diese Instanz innerhalb der gesamten Klasse als Eigenschaft dann benutzen kann. Ist im Grunde genommen nichts anderes, als hätte ich Folgendes gemacht. Wenn ich jetzt hier hingehen würde und würde sagen "private", "userService" vom Typ "UserService" und nehme das "private" mal weg, dann wäre das nichts anderes als "this.userService" gleich "userService". Und diese Schreibarbeit nimmt euch dieses ganz einfache "private", das ihr hier vor dem Parameter schreibt, einfach komplett ab. Damit ist das dann global erreichbar. Also kann ich jetzt hier sagen, "This.userService". "setSelectedUser" "this.selectedUser". Anschließend werden wir innerhalb des Konstruktors dafür sorgen, dass wir einen einmal gespeicherten User wiederholen. Wir beginnen damit, dass wir über "let" die Variable "lastSelected" setzen. Und zwar vom Typ "IUserVO". Und das soll gleich sein, der "userService" mit "getSelectedUser". Im nächsten Schritt muss ich gucken, ob "lastSelectedUser" gesetzt ist. Das ist dann der Fall, wenn ich mindestens einmal via "setSelectedUser" den User im localStorage hinterlegt habe. Wenn ich das aber, wie jetzt in diesem Fall noch nie gemacht habe, muss ich natürlich auch den Extremfall entsprechend beachten wenn eben kein "lastSelectedUser" da ist. Also darf nur in dem Fall, wo ein "lastSelected" vorhanden ist weitergemacht werden. Wie mache ich weiter? Im nächsten Schritt überprüfe ich nun, ob in der User-Liste der zuletzt selektierte User immer noch existent ist. Stellt euch einfach mal vor, ihr seid in einem Szenario, wo die Liste nicht wie in unserem Fall statisch hinterlegt ist, sondern über einen asynchronen Prozess von einer Datenbank kommt. Dann kann es ja durchaus mal sein, dass ein User mal gelöscht wurde. Ich überprüfe jetzt also, ob ich den User finde. Und falls ich ihn finde, möchte ich ihn hinterlegen in "this.selectedUser". Der Wert soll ermittelt werden, indem ich innerhalb der User-Liste suche mit der Methode "find". Die Methode "find" erwartet von mir eine Funktion. Die Funktion selber, hat als Parameter hier "value". "value" ist der jeweilige Wert, innerhalb der Liste, in der gesucht wird. Und wenn der Wert dann erfolgreich gefunden wurde, nachdem ich suche, muss ich ein "true" zurückgeben, ansonsten ein "false". Wie kann ich das checken? Ganz einfach über ein "return". Wenn nämlich der "value" und dessen ID genau gleich ist dem "lastSelected.id". Das war es im Wesentlichen schon und damit hätte ich dann den alten selektierten User safe. Jetzt müssen wir das Ganze nur noch einmal testen. Aktuell ist der Fall, es gibt keinen selektierten User, deswegen ist hier nichts passiert. Selektiere mal mich, das geht noch wunderbar. Mache ein Reload. Und wunderbar, bin ich wieder erneut selektiert. Mache das nochmal mit dem Florian. Auch hier... Und natürlich wird es dann halt auch so funktionieren, wenn ich jetzt hier mit dem Rob dann arbeite. In diesem Video haben wir gemeinsam gelernt, wie wir in der Lage sind, ein UserService einzubinden und zu nutzen, um im localStorage Daten zu hinterlegen.

Angular 2 Grundkurs

Lernen Sie Angular 2 von Grund auf kennen und erkunden Sie die Möglichkeiten der Bindungen sowie den Einsatz von Direktiven und Pipes.

4 Std. 37 min (65 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!