💡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: