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

Angular 2 Grundkurs

Komponenten verschachteln

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieses Video zeigt, was zu tun ist, um innerhalb einer Komponente weitere Komponenten zu nutzen.
03:48

Transkript

Angular 2 ist ja ein Framework, das es uns ermöglicht, eine komponentenbasierte Anwendung zu realisieren. Und bei einer komponentenbasierten Anwendung ist eins der wichtigsten Dinge natürlich, dass ich innerhalb einer Komponente weitere Komponenten hinzufügen kann. Also Komponenten ineinander verschachtle. Wie einfach das Ganze funktioniert, möchte ich euch sehr gerne in diesem Video zeigen. Ich beginne damit, dass ich jetzt eine User-Komponente erzeuge. Die User-Komponente erzeuge ich in einer TypeScript-Datei. Und diese TypeScript-Datei lege ich in einem Unterordner "user" ab. Und die Datei nenne ich "user.component" an dieser Stelle, und die "user.component", die beginnt mittels eines Decorators. Nämlich dem Component-Decorator Und in dem Component-Decorator werden jetzt hier die Metainformationen für die Komponente hinterlegt. Die erste Metainformation ist der Selektor. Mit dem Selektor bestimme ich, mit welchem Knoten oder Knotennamen dann entsprechend die Komponente initialisiert werden soll. Der Selektor, der soll bei mir jetzt "user" heißen. Bedeutet nichts anderes, als das, wenn der Compiler einen "user"-Knoten entsprechend in einer Vorlage findet, er automatisch den Bezug zu dieser Komponente dann herstellen kann. Großartig. ALs nächstes brauchen wir natürlich ein Template. Das Template selber soll relativ einfach gehalten werden. Ich beginne mit einer Section. In der Section soll es einen "header"-Bereich geben und einen Absatz. Und in den Absatz selber kommt ein bisschen Blindtext rein. Großartig. Mein nächstes Ziel ist es jetzt, nachdem ich diese Komponente erzeugt habe, natürlich die Metadaten auch an eine Klasse zu binden. Also "export class", und "UserComponent" will ich hier anlegen. Das sieht doch großartig aus. Das heißt, jetzt habe ich eine Klasse angelegt, "UserComponent", und die UserComponent-Klasse selber referenziert hier auf die Metadaten, die ich mittels des Decorators hier gesetzt habe und damit kann ich meine Komponente setzen. Fehlt noch, dass ich die Komponente einbinde. Wenn ich sie einbinden will, erinnern wir uns ganz kurz daran, wir haben hier im Root dann entsprechend "my-app", und "my-app" verweist hier auf eine html-Datei als Template. Und in diesem template gibt es hier den "main"-Bereich und in dem "main"-Bereich möchte ich jetzt den User hier einfach einbinden. Und ihr könnt beispielsweise auch hier wunderbar erkennen, dass WebStorm die Intelligenz sogar besitzt, automatisch solche Komponenten, die ich erzeugt habe, dann auch zu erkennen. Das heißt, jetzt habe ich hier die Implementierung der Komponente im Template drin. Jetzt muss ich nur noch dem Compiler Bescheid sagen: Wenn du hier diesen Knoten findest, dann musst du das entsprechend mit dieser Komponente in Verbindung bringen. Und wie mache ich das? Ich muss natürlich jetzt Im Modul, im Applikationsmodul selbst die Komponente quasi registrieren. Das mache ich im Deklarationsbereich, genauso, wie ich das auch mit der AppComponent gemacht habe. Also sage ich, es gibt hier eine "UserComponent" und die UserComponent wird entsprechend so laufen. Dann kann ich das Ganze mal testen. Ich mach nochmal ein Reload, dann seht ihr, dass es definitiv hier die Datei ist, die ich jetzt hier angelegt habe. Und auf die Art und Weise konnte ich jetzt sehr einfach meine eigene Komponente bauen und wenn ich hier den Inspektor mir mal anschaue, dann könnt ihr auch wunderbar erkennen, dass das hier über die User-Komponente aufgebaut worden ist. Und das diese User-Komponente eben die berühmt-berüchtigten Section hat, den Header und den Absatz.

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!