📖5. Add navigation with routing

Routes in routing-module

Es gibt 2 Arten zu navigieren:

• component

• loadChildren

Component sollte vor allem für Kernkomponente verwendet werden, da der Code des Komponenten zusammen mit dem Hauptbundle der Anwendung geladen wird.

const routes: Routes = [
  { path: 'heroes', component: HeroesComponent }
];

LoadChildren (lazy loading) bewirkt das Angular-Module asynchron geladen werden. So werden die Module nur geladen sofern diese effektiv benötigt werden. Dies reduziert die anfängliche Ladezeit der Anwendung, da nicht der gesamte Code auf einmal geladen wird.

Dazu findest du in in der folgenden Lektüre mehr.

const routes: Routes = [
  {
    path: 'items',
    loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
  }
];

Übungen

Input() und Output()

Du hast im Kapitel 3 kennengelernt, wie man Daten in eine Child-Komponente hineingibt. Natürlich kannst du auch vom Child Events an den Parent zurückgeben. dazu verwendet man Event Emitter.

Lies bitte dazu den folgenden Artikel durch: Output()

Wir wollen nun die Heroes, die in der Heldenauflistung angezeigt werden, als eigene Komponente auslagern. Erstelle dafür eine Komponente, welche die Daten eines Helden als Input entgegennimmt und beim Klick einen Event an den Parent schickt mit der Id des Helden. Diese wird dann für die Navigation verwendet. Im NgFor soll nun deine Komponente angezeigt werden.

Navigation

Du hast gelernt wie man in Angular durch deine Applikation navigiert. Gut gemacht! Nun ist es Zeit durch die Applikation mittels lazy loading durch zu navigieren. Studier dafür die obige Lektüre genau und stelle bis auf den default Route alle anderen um.

Zusätzlich möchten wir eine neue Seite haben, in welcher du beschreibst was du alles gelernt hast mittels Tour of Heroes.

Async Pipe anwenden

Im 4. Kapitel hast du gelernt wie man Observable nutzt und was das genau ist. Wir hatten dafür eine Liste von Helden die als Observable<Hero[]> zurückgeliefert wurde. Da du jetzt eine Seite erstellt hast mit den Lessons learned, wird es Zeit deine Kontaktangaben darunter zu legen. Diese sollen mittels asynchronem Aufruf geladen werden. Folgendermassen muss das aussehen:

contactData$: Observable<Contact> = of({
    company: "[DEINE FIRMA]",
    name: "[DEIN NAME]",
    email: "[DEINE EMAIL ADRESSE]",
})

Es handelt sich hierbei nicht um eine Liste sondern ein einzelnes Objekt, so kannst du *ngFor nicht mehr nutzen. *ngIf ist eine sehr gute Option, recherchiere mal wie dies gemacht wird.