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

Angular 2 Grundkurs

Komponenten in Shared-Modules

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
In diesem Video lernen Sie, wie Komponenten in Shared-Modules eingebunden und anschließend im Applikations-Modul importiert werden.
05:53

Transkript

Jetzt möchte ich euch noch eine weitere Variante vorstellen, wie ihr später so eine User-Komponente einbinden könnt Und zwar eine Variante. Ihr müsst euch vorstellen, ihr habt ein relativ großes Projekt und es kann halt sein, oder ihr habt mehrere Projekte, und es kann halt sein, dass diese User-Komponente in unterschiedlichen Projekten eingesetzt werden soll. Sollte das der Fall sein, dann ist es natürlich am sinnvollsten, wenn ihr in der Form arbeitet, dass ihr die User-Komponente selbst, innerhalb eines Moduls ablegt. Der Vorteil ist es dann, dass ihr genauso, wie ihr jetzt hier über "imports" hier beispielsweise Logiken über externe Module hinzufügen konntet, auch eine Komponente oder mehrere Komponenten auf diese Art und Weise über Module in eurer Applikation implementieren könnt. Und damit könnt ihr dann wieder in diesem Black-Box-Prinzip arbeiten und die Module innerhalb eures Teams verteilen. Um das Ganze zu realisieren, muss ich also nichts anderes machen, als ein neues Modul, und das soll jetzt ein User-Modul sein. Ich klaue mir hier schon mal den "import", damit ich den nicht vergesse, und erzeuge jetzt hier fix meine TypeScript-Datei, nämlich "user.module". Und die "user.module"-Datei, die ich jetzt hier erzeuge, die beginnt eben mit diesem "import", den ich mir dort geklaut habe und muss dann entsprechend über den Decorator hier "NgModule", die Metadaten für das Modul dann bereitstellen. So, wunderbar! Und das muss wiederum natürlich über "export" an eine Klasse gehängt werden. die dann importiert werden kann. Und dieses nenne ich dann an dieser Stelle "UserModule". Das heißt ich erzeuge an dieser Stelle mein erstes eigenes Modul, dass ich dann als Shared-Modul verwenden möchte, das heißt ich möchte es dann an anderen Stellen dann importieren können, um es dann zu nutzen. Ich kann mir relativ viel klauen, im Grunde genommen. Und zwar könnte ich jetzt hier aus dem App-Modul, den Deklarationsblock hier nehmen, denn den brauche ich auf jeden Fall. Den schreibe ich jetzt hier rein und damit hätte ich an dieser Stelle dann schon mal die User-Komponente in diesem Modul implementiert. Bitte denkt daran: Ihr wollt ja später dieses Modul als Shared-Modul nutzen, das heißt, ich möchte später im Grunde genommen, hier im "app.module" nicht mehr die User-Komponente importieren, sondern stattdessen einfach das "UserModule". Und wenn ihr das auf diese Art und Weise realisieren wollt, ist es natürlich ganz wichtig, dass wenn der Import dieses UserModules hier reinkommt trotzdem das Applikationsmodul darüber informiert wird, welche Komponenten existieren, das heißt ich muss im "user.module" selber die User-Komponente nicht nur deklarieren, das heißt anmelden, sondern auch exportieren, damit andere Module die das dann entsprechend nutzen wollen es dann auch automatisch zur Verfügung kriegen. "export" wird übrigens an dieser Stelle... - die Eigenschaft muss Mehrzahl sein, also "eports" - Und damit haben wir jetzt ein eigenes Modul erzeugt, und dieses Modul, das sorgt dafür, dass dann automatisch die User-Komponente exportiert wird. Und wenn ich sie dann woanders hier importiere, dieses Modul, dann ist dann automatisch auch die Komponente hier im declaration-Block dann global erreichbar. Bleibt eigentlich nur noch ein wichtiger Hinweis, den ich euch gerne mitgeben möchte. Es wird mit Sicherheit mal passieren, dass ihr in euren eigenen Komponenten so was wie NgIf verwendet, eine NgSwitch-Anweisung oder andere immer wiederkehrende Direktiven, die immer sehr häufig verwendet werden, also hauseigene Angular-Direktiven. Damit ihr diese hauseigenen Angular-Direktiven auch tatsächlich innerhalb eures eigenen Moduls hier nutzen könnt, und im Kontext des Moduls, dann auch innerhalb eurer eigenen Komponenten, ist es sehr wichtig, dass ihr hier mittels "import" das common-Modul einbindet. Denn dieses common-Modul hat eben all diese wichtigen Direktiven, Pipes und Co und die hauseigenen Direktiven, Pipes und Co von Angular implementiert. Und wenn ihr dies importiert, hat das genauso den gleichen Effekt, wie hier der Import des UserModules. Alle Funktionalitäten werden automatisch hier importiert. Erinnert euch bitte daran. BrowserModule selber importiert ebenfalls das common-Modul, deswegen muss ich es an der Stelle beim AppModule nicht tun. Und denkt auch bitte daran, wenn ich das mehrfach importiere, das heißt, wenn ich jetzt weitere Module importieren würde, die ebenfalls auf das common-Modul verweisen, hat Angular selbstverständlich die Intelligenz und implementiert das ganze Modul trotzdem nur ein einziges Mal. Es ist halt einfach nur wichtig, dass ihr alle Module, die im Grunde genommen in Abhängigkeit zu eurem Modul sein könnten auch wirklich auf jeden Fall hier mit einbindet. Ansonsten würde die ganze Geschichte, nicht mehr vernünftig aufgehen. So. Wunderbar. Jetzt habe ich mein eigenes Modul erzeugt, das Shared-Modul. Ich habe das Shared-Modul hier in meinem Applikationsmodul eingebunden. Und in dem Shared-Modul habe ich eben die Komponente implementiert, welche ich dann in meiner Applikationskomponente hier eingebunden habe. Es müsste zur Folge haben, das anschließend alles funktioniert. Also wechseln wir hier nochmal in den Browser, machen einen Reload. Dann sehen wir schon mal dass der Ladeeffekt auf jeden Fall funktioniert hat. Wir gucken auch nochmal hier ins Netzwerk rein und im Netzwerk, wenn wir dann entsprechend nochmal ein Reload machen, sehen wir jetzt hier, dass dann alle wesentlichen Elemente dann auch entsprechend geladen wurden. Schauen mal ganz kurz nach User und dann sehen wir, dass sowohl UserModule als auch User-Komponente automatisch von SystemJS geladen worden ist. Das heißt, das ist der definitive Beweis dafür, dass es hier über das eigene Modul dann initialisiert und geladen worden ist. In diesem Video habt ihr gelernt, wie ihr Komponenten ineinander verschachteln könnt und wie ihr in der Lage seid, auch mit Shared-Modules umzugehen.

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!