Angular 2 Grundkurs

Der @Inject Decorator

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In diesem Video verfolgen Sie, wie man Werte im Provider speichert und anschließend über die DI und den @Inject Decorator abruft.
07:06

Transkript

Wir haben mittlerweile gelernt, wie wir selber Services erzeugen können und wie wir dafür sorgen können, Services per Dependency Injection einfach zu benutzen, indem wir diese innerhalb eines Moduls einfach als Provider registrieren Jetzt möchte ich Euch aber zeigen, dass wir nicht nur in der Lage sind Services zu registrieren sondern auch ganz primitive Werte zum Beispiel registrieren können, innerhalb der Provider. Wenn wir die dort registrieren, haben wir dann anschließend übrigens auch natürlich die Möglichkeit, diese über Dependency Injection abzurufen. Und genau das würde ich Euch sehr gerne zeigen. Lasst uns einfach statt einem normalen Service einen Wert hier registrieren. Das mache ich relativ einfach, indem ich ein Objekt vom Value Provider, ich caste das eigentlich nur, damit ich mich nicht vertippen kann, denn WebStorm bietet mir nun automatisch die richtigen Eigenschaften an, die ich hier eingeben kann. Deswegen der Cast. Ihr könnt normalerweise auch ganz einfach das Objekt selber generieren. Das wird genauso funktionieren. Also, provide habe ich. In diesem Objekt gibt es also eine Eigenschaft Provide. Was macht diese Eigenschaft Provide eigentlich? Die Eigenschaft Provide ist im Grunde genommen eigentlich nur der Bezeichner, über den ich später diesen Wert per DependencyInjection wieder abrufen möchte. Und dieser Bezeichner soll einfach mal AUTHOR sein. Und zusätzlich kann ich jetzt hier einen Wert für diesen Bezeichner AUTHOR hinterlegen über useValue. Mit useValue kann ich dann jetzt hier sagen, das ist der SABAN. Mit Multiple, das ich jetzt hier sehe, wäre ich im Übrigen auch in der Lage gewesen, dieses Providerobjekt mehrmals zu generieren und dann könnte ich beispielsweise über MultipleTrue dafür sorgen, dass ich mehrere Autoren hier generieren kann und damit würde dann entsprechend "AUTHOR" eine Liste. In meinem Fall erst mal irrelevant. Das heißt, ich möchte ganz normal nur den Autor haben Lasst uns das Ganze jetzt nur noch initiieren. Ich wechsle zurück in die App Component und in der App Component selber werde ich jetzt hier die Dependency Injection machen. Die Dependency Injection kann ich aber jetzt nicht nur einfach über den Typ machen, weil ich hab ja diesen Typ im klassischen Sinne hier nicht mehr sondern nur einen Wert, den ich hier mit einem Bezeichner hinterlegt habe. Also verwende ich statt der normalen Deppendency Injection eine Dependency Injection über einen Decorator und der Decorator nennt sich hier einfach Inject. Und der Inject Decorator erwartet von mir den Bezeichner in diesem Fall den Token, über den er entsprechend aus dem Provider den Wert abgreifen kann und das ist eben AUTHOR gewesen. Der Rest kann im Grunde genommen genauso gleich sein. Das heißt, ich kann jetzt hier sagen: das Ganze soll als Public hinterlegt werden, intern soll das Ganze als AUTHOR weitergeführt werden und ich weiß auf jeden Fall, das ist ein String. OK Was mache ich mit diesem String? Ich werde diesen String einfach mal ausgeben lassen. Dafür werde ich schnell mal in mein HTML für die Komponente gehen und unten im Footer werde ich dann einfach hier via Bindung den Autor eingeben. Schauen wir und das an und dann sehen wir: Voila, der Saban. In diesem kurzen Sample habt Ihr jetzt gesehen, wie einfach es ist, Werte dann hier innerhalb eines Providers zu hinterlegen. Bitte denkt aber an Folgendes, das ist extrem wichtig: Im Gegensatz zu Services können Werte überschrieben werden, nämlich in der Abhängigkeit, wie ich einzelne Module in mein Applikationsmodul importiere. Bedeutet: würde ich jetzt hier aus user.module mal das hier klauen, und würde dann anschließend mal ins utils.module gehen. Das utils.module verwende ich ja ebenfalls. Und hier würde ich einfach Providers definieren. und werde an der Stelle wieder den ValueProvider hier rein legen. Aber dieses Mal verwende ich das Ganze hier zum Beispiel mit dem Wert HANS. Speichere das Ganze. Dann werdet Ihr hier unten sehen, dass es der Hans ist. Warum passiert das? Das Ganze passiert, weil im Applikationsmodul selber werden ja beide anderen Module importiert. Erst user.module, dann utils.module. Die Reihenfolge bestimmt im Grunde genommen, welcher Wert dann sticht. Hier ist es so, dass derjenige, der als letztes kommt, den Wert, der davor gesetzt worden ist, überschreiben würde. Würde ich die Reihenfolge also anders herum setzen, könnt Ihr sehen, dass es wieder der Saban ist. Worüber Ihr euch allerdings keine Sorgen machen müsst, und das ist ganz sicher so, ist, wenn Ihr nicht über Lazy Loading irgendwelche Module ladet dass Ihr irgendwelche Services überschreiben könntet oder Ähnliches. Das möchte ich Euch einmal ganz fix beweisen, indem ich hier im UserService selber im Constructor mal ein Konsolenlog gemacht habe von THIS. Das heißt, der Constructor geht hin und zeigt mir eigentlich in dem Moment, wo eine Instanz vom UserService gemacht worden ist, soll diese Instanz sich in der Konsole einfach mal zurückmelden. Jetzt gehe ich hin und lasse mir die Konsole hier mal anzeigen. Dann seht Ihr, dass ich hier den UserService habe. Ein einziges Mal erstellt, genau so, wie ich es auch erwarten würde, denn die Instanz des UserService wird in den Injector als Single hinterlegt. Und ich möchte Euch jetzt eigentlich nur beweisen, dass Ihr hier 100 prozentig einen Single habt und Euch keine Sorgen machen müsst, indem ich hier den UserService mal nehme, und ebenfalls ins user.module rein nehme, und dann habt Ihr im Grunde genommen relativ fix den Beweis dafür, dass hier trotzdem nur ein einziges Mal der Konsolenblock kommt und das ist im Grunde genommen das Indiz dafür, dass Angular hier schon die Intelligenz hat, einen Service so zu unterscheiden, dass er sieht: das ist ein Service, also werde ich diesen Service dann initial nur einmal als Single machen und bei einem Wert geht es einfach davon aus, dass dieser Wert dann überschrieben werden kann. Im Übrigen würde er das nicht überschreiben, wenn ich hier natürlich das multi auf True gesetzt hätte, so wie ich es am Anfang erwähnt hatte. Würde ich nämlich multi auf True setzen, wüsste er automatisch, ich kann das mehrfach initialisieren lassen und dann schaut mal, was passiert. Voila, dann ist da entsprechend, Autor hier ein Liste und diese Liste ist dann in diesem Falle Saban und der Hans beziehungsweise Hans und Saban, abhängig davon, in welcher Reihenfolge ich die Module initialisiert habe. In diesem Video habt Ihr gelernt, wie Ihr in der Lage seid, Werte im Provider zu hinterlegen und diese anschließend über AppInject abzurufen.

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!