Tipps und Tricks mit Angular, Teil 10: Mehrdimensionale Navigationsstrukturen
Routing an sich ist in Single-Page-Anwendungen nicht kompliziert. Benötigen Navigationsstrukturen Hierarchieebenen, gibt es dafür in Angular zwei Ansätze für unterschiedliche Bedürfnisse: Child Routes und Aux Routes.
- Manfred Steyer
Tipps und Tricks für AngularJS
Teil 1: Internationalisierung
Teil 2: ES2015
Teil 3: OAuth 2.0
Teil 4: Animationen
Teil 5: Transformationen und Interceptors
Teil 6: Backend-lose Entwicklung mit ngMockE2E
Teil 7: GUIs mit @ngrx/store (I)
Teil 8: GUIs mit @ngrx/store (II)
Teil 9: Performance-Tuning
Teil 10: Mehrdimensionale Navigationsstrukturen
Außerdem:
Das Prinzip des Routing in Single Page Applications ist einfach: Die Anwendung erhält einen Platzhalter, in den ein Router je nach gewünschtem Navigationspunkt eine Komponente lädt. Etwas komplexer wird es, wenn mehrere Platzhalter benötigt werden. Der vorliegende Artikel stellt dazu zwei Konzepte des Angular-Routers vor: Child Routes und Aux Routes. Die dazugehörige Beispielanwendung findet sich im GitHub-Repository des Autors.
Hierarchisches Routing mit Child Routes
Um hierarchische Navigationsstrukturen zu schaffen, können Komponenten, die der Router aktiviert, einen weiteren Platzhalter aufweisen. Die Routen, die für so einen Platzhalter definiert werden, sind auch als Child Routes bekannt.
Ein Beispiel dafür stellt die FlightBookingComponent in Abbildung 1 dar. Sie enthält neben dem links dargestellten Untermenü einen Platzhalter, durch den sich weitere Routen aktivieren lassen.
Danach hängt es von der gewählten URL ab, welche Child Route der Router im Platzhalter der betrachteten Komponente aktiviert. In Abbildung 2 gibt die verwendete URL beispielsweise an, dass die FlightSearchComponent innerhalb der FlightBookingComponent zu aktivieren ist.
Child Routes implementieren
Um die Implementierung von Child Routes zu veranschaulichen, ist im Beispiel ein Hauptmenüpunkt Flug buchen mit zwei untergeordneten Menüpunkten Flug suchen und Passagier suchen vorgesehen. Der Hauptmenüpunkt verweist auf eine FlightBookingComponent, die links ein Menü mit Flug auswählen und Passagier auswählen präsentiert und rechts davon einen Platzhalter aufweist (siehe Abb. 3).
Abhängig vom Befehl, den der Benutzer auf der linken Seite auswählt, lädt die Anwendung die FlightSearchComponent oder die PassengerSearchComponent (aus Platzgründen hier nicht abgebildet) in den Platzhalter auf der rechten Seite.
Die Implementierung der FlightBookingComponent gestaltet sich zunächst einfach:
@Component({
selector: 'flight-booking',
templateUrl: './flight-booking.component.html'
})
export class FlightBookingComponent {
}
Auch das Template der FlightBookingComponent definiert einen Platzhalter mit router-outlet. Wie in dem der AppComponent richtet das aktuelle Template ein paar Links mittels routerLink ein:
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked" style="margin-top:20px;">
<li routerLinkActive="active"><a [routerLink]="['./flight-search']">
Flug auswählen</a></li>
<li routerLinkActive="active"><a [routerLink]=
"['./passenger-search']">Passagier auswählen</a></li>
</ul>
</div>
<div class="col-md-9">
<router-outlet></router-outlet>
</div>
Hinweis: Mit dem Präfix ./ zeigt routerLink an, dass die definierte Route an die aktuelle Route anzuhängen ist. Da es sich dabei um das Standardverhalten handelt, könnte es die Information auch weglassen. Interessant wird es jedoch, wenn der Link sich irgendwo anders im Verzeichnisbaum befindet. Um beispielsweise einen Schwesterknoten zu adressieren, ist ../ voranzustellen. Mit ../passenger-search lässt sich somit von /flight-search zu /passenger-search navigieren.
