📱
M335 - Mobile-Applikation realisieren
  • ▶️Intro
  • 🗓️Kursplanung & Organisation
  • 🛠️Infrastruktur und Tools
  • ❓FAQ
  • TAG 1
    • 📖Native, Hybrid, Web
    • 📖Frameworks
    • 📖Angular
    • 🦸‍♂️Tour of Heroes
      • 📖Introduction
      • 📖Create a project
      • 📖1. The hero editor
        • 💡Hinweise und Zusatzaufgaben zu Kapitel 1
      • 📖2. Display a list
        • 💡Hinweise und Zusatzaufgaben zu Kapitel 2
      • 📖3. Create a feature component
        • 💡Hinweise zu Kapitel 3
      • 📖4. Add services
        • 💡Hinweise zu Kapitel 4
      • 📖5. Navigation
        • 💡Hinweise und Zusatzaufgaben zu Kapitel 5
        • 💡Ergänzend zu Navigation
      • 💡 Debugging
    • 📖CSS / SASS / SCSS
  • Tag 2
  • 📖Ionic
  • ❓Ionic Projekt erstellen
  • 💡Ionic Übungen
  • 📖Usability
  • 📖Prototyping
  • 📖UI Elements
  • 🛠️ Projektsetup
  • Tag 3
    • 📖Native Grundlagen
    • 📖Capacitor Einführung
    • 💡App auf Gerät laufen lassen
    • 💡Native Komponente mit Capacitor verwenden
    • ❓Starten auf Gerät mit Live-Reload
  • 📖Persistenz
    • 📖Online Persistenz
    • 📖Offline Persistenz
  • Tag 4
    • 📖Testing
      • ❓Testplan: Praxisbeispiel
      • ❓Testprotokoll: Praxisbeispiel
  • Tag 5
    • 💡Build, Veröffentlichung, Ausblick
Powered by GitBook
On this page
  • Wie kann ich zu einer Seite resp. zurück navigieren?
  • Wie übergebe ich Werte zwischen zwei Seiten?
  1. TAG 1
  2. Tour of Heroes
  3. 5. Navigation

Ergänzend zu Navigation

Wie kann ich zu einer Seite resp. zurück navigieren?

Die Navigation ist basierend auf welcher URL wir gerade haben resp. welcher Route dazu passt. Wenn die URL gewechselt wird, ändert die aktuelle Seite. Aber wir haben einige weitere Optionen um zu navigieren:

Zuerst müssen wir den Angular Router importieren und in unserer Page/Component hinzufügen. Füge dazu in der Page/Component folgendes ein:

navigation.page.ts
// Schritt 1: Angular Router importieren
import { ..., inject } from '@angular/core';
import { Router } from '@angular/router';


... 

export class NavigationPage implements OnInit {
    // Schritt 2: Router injecten
    private router = inject(Router)
    
    
    ...
}

Danach kann man ein normalen Angular Router href verwenden um auf eine andere Seite zu navigieren. /detail ist dabei die URL der Zielseite.

navigation.page.html
<a [href]="'/detail/' + item.id">...</a>

oder auch im Code:

navigation.page.ts
navigateToDetail() {
    this.router.navigateByUrl('/detail');
}
navigation.page.html
<button (click)="navigateToDetail()">Detailseite anzeigen</button>

Wie übergebe ich Werte zwischen zwei Seiten?

Das Array, welches der navigate Funktion als Parameter übergeben wird, akzeptiert die folgenden Parameter:

navigation.page.ts
navigateToDetail() {
    // Der Parameter 'id' wird später weiter unten weiterverwendet
    this.router.navigate(['/detail', { id: itemId }]);
}

Die Daten sind in der PersonDetail-Seite nun über die ActivatedRoute mit über paramMapzu holen:

person-detail.page.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-person-detail',
  templateUrl: './person-detail.page.html',
  styleUrls: ['./person-detail.page.scss'],
})
export class PersonDetailPage implements OnInit {
  private personID: number;
  private route = inject(ActivatedRoute);

  ngOnInit() {
    // Hier wird die Personen-ID über den Parameter 'id' geholt.
    this.personID = this.route.snapshot.paramMap.get('id');
  }

}

Mehr dazu findest du auch in folgendem Tutorial:

PreviousHinweise und Zusatzaufgaben zu Kapitel 5Next💡 Debugging

Last updated 5 months ago

🦸‍♂️
📖
💡