Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Angular 2 Grundkurs

Navigation über Router-Direktiven

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die routerLink- und routerLinkActive-Direktiven ermöglichen die Navigation zwischen Routen und das Hervorheben von Links.
03:54

Transkript

Natürlich wäre es auch sehr hilfreich, wenn wir innerhalb unserer Anwendung in der Lage sind Links zu setzen, die ein Routing dann entsprechend zur Folge hätten. Das heißt, das ich nicht permanent vom User verlangen muss, dass er selber hier zwischen List und Home hin und her taumelt. Um Euch das Ganze einfach mal zu zeigen und zu demonstrieren, wie einfach das ist, werde ich daher jetzt hier innerhalb meiner app.component.html selbst im Nav Bereich ganz fix etwas hinzufügen. Da hatten wir mal so eine unsigned list oder unordered list aber die brauchen wir nicht mehr. Statt dessen werde ich entsprechend einen Anchor hier setzen. href ist an dieser Stelle für mich irrelevant. Statt dessen trage ich hier mal ein "home" und wiederhole das Gaze noch mal für "list" . Ich speichere das Ganze und dann sehen wir hier wunderbar, dass ich Home und List als Link habe. Und jetzt verwende ich etwas ganz Besonders, Ich verwende nämlich eine Direktive, die mir Angular automatisch mit dem Router Modul zur Verfügung stellt, die routerLink Direktive. Die routerLink Direktive, die ich verwende, die erwartet im Grund genommen von mir nur einen Pfad zu dem ich dann entsprechend navigieren möchte, und kümmert sich dann anschließend um alles Weitere, damit das Ganze sinnvoll aufgelöst werden kann. Das heißt, ich wäre jetzt hier in der Lage, dann bei Klick auf Home, auf Home zu wechseln, und bei Klick auf List, auf List zu wechseln, was wir hier auch erkennen können, wenn Ihr gleich unten mal auf die Statusleiste geht. Das ist, das hier die routerLink Direktive im Grunde genommen dafür Sorge trägt, dass normaler href dann gesetzt wird und darauf geachtet wird, dass alle notwendigen zusätzlichen Parameter dann ebenfalls mit gesetzt werden. Das Ganze könnte ich, wenn ich beispielsweise eine Route hätte, die mit zusätzlichen Parametern arbeiten müsste, also wenn jetzt zum Beispiel die Liste selber mit bestimmten ID Werten arbeiten müsste, kann ich das Ganze dann natürlich auch erweitern, indem ich dann in dem Router Link dann über Interpolation diese ID Werte von außen übergeben kann. Dies ist aber nicht Bestandteil des Grundlagentrainings deswegen wechseln wir mal ganz schnell zurück in die Komponenten html und stattdessen werden wir jetzt hier noch eine weiteres Feature hinzufügen. Wir werden die routerLinkActive Direktive vorstellen. Die erwartet von mir einfach mal einen Wert für eine CSS Klasse, die automatisch an diesen Anchor-Tag drangesetzt wird in dem Moment, wo wir quasi eine aktive Route haben, wo also in diesem Fall Home aktiv wäre. Das Gleiche machen wir jetzt auch für die Liste und jetzt muss ich nur noch diese Klasse auch definieren. Dafür wechsele ich wieder in meine app.component.css und werde jetzt hier einfach mal meine Color setzen, und die Farbe soll ein nettes Grün sein, Ich bin kein Designer, Ihr müsst mir verzeihen, wenn es komplett hässlich aussieht, aber schaut mal: Oh Gott Ich mach das Grün mal weg. machen wir mal Rot. Ihr werdet dann sehen, dass jetzt, je nachdem, welche Route ich benutze, dann automatisch der entsprechende Anchor rot gemacht wird. Das passiert eben, weil an dieser Stelle hier die routerLinkActive Direktive automatisch ActiveLink als Klasse hinzufügt, sobald die Route aktiv ist. In diesem Video haben wir gemeinsam die routerLink und die routerLinkActive Direktive kennen gelernt.

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!