Angular 2 Grundkurs

Navigation über Router-Service

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wie Sie mit den Router-Services einfache Navigationen erstellen können, darum geht es in diesem Video.
03:07

Transkript

In den kommenden Minuten möchte ich Euch gerne den Router Service vorstellen. Der Router Service ermöglicht Euch ebenfalls die Navigation zu anderen Routen, und auch natürlich auch die Kontrolle eines Routers. Der Router Service selber, den möchte ich jetzt hier in meinen Home View mal einbinden und dafür sorgen, dass sobald man hier auf Welcome klickt, automatisch zur Liste gewechselt wird. Und das mache ich jetzt, indem ich einfach auf die home.component gehe, und innerhalb der home.component werde ich jetzt dern Router Service selbst erst mal per Dependency Injection holen indem ich im Constructor selber über private dafür sorge, dass der Router einfach injiziert wird. Nachdem er injiziert ist, möchte ich eine Methode zur Verfügung stellen, goList und die Methode goList soll nichts anderes machen als den Router selber anzusprechen. Und wenn wir uns den Router mal hier ansehen, dann sehen wir, dass der Router halt unterschiedliche Möglichkeiten bietet. Beispielsweise den State in Erfahrung zu bringen. Ich kann auch Server auf bestimmte Events setzen. Das sind alles Sachen, die ich jetzt nicht im Grundlagentraining zeigen will, aber ich möchte Euch einfach zeigen, dass der Service hier Euch schon sehr viele Möglichkeiten bietet, innerhalb des Routings dann zu navigieren und bestimmte Funktionalitäten durchzuführen. Was für uns jetzt mal interessant sein soll, ist das Navigate. Ich möchte quasi zu einer anderen Route navigieren. Und dann seht Ihr dass hier eine Liste verlangt wird und innerhalb dieser Liste definiere ich dann quasi, wohin ich dann navigieren möchte. Die Liste werde ich jetzt hier einfach mal zur Verfügung stellen, indem ich eine neue Variable "link" erzeuge, und die neue Variable link soll entsprechend sagen: Ich möchte zur List gehen. Jetzt werden sich einige von Euch fragen: Warum ist das eine Liste? Warum ist das nicht einfach ein Array? Das liegt wirklich daran, dass Ihr in einer Route auch durchaus in der Lage gewesen wärt, hier diese Liste hier mit zusätzlichen Parametern zu versehen, zum Beispiel den ID Parameter. Wenn Ihr das getan hättet, dann müsstet Ihr natürlich logischerweise auch hier beispielsweise den Wert für die ID mit übergeben, damit dann anschließend die Navigation erfolgreich funktionieren kann. In diesem Sample oder Grundlagenkurs werden wir uns jetzt nicht auf Parameter innerhalb von Routings konzentrieren, daher entferne ich das Ganze wieder und rufe eben den Service nur ganz einfach auf. Und navigiere zu dem Link, den ich zuvor in der Zeile definiert habe, und muss zu guter Letzt jetzt nur noch dafür sorgen, dass das hier mit der Überschrift verbunden wird. Dafür binde ich das Klick-Ereignis und sage einfach: goList. Und jetzt können wir das Ganze mal ausprobieren, Klicke ich da drauf, wandere ich automatisch in die Liste. In diesem Video haben wir gemeinsam den Router Service kennen gelernt, um damit zu navigieren.

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)
Super Einführung Tutorial
Anonym
Es wäre super, wenn Herr Ünlü die Forsetzung machen könnte.
Meine Vorschläge wären:

- Router, Child, Root, parameter, Guard, Reuseable Strategie
-Statt SystemJS, Webpack2 mit plugin und Erklärung wie beim Startup Projekt SystemJS.

Gratulation!

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!