Προγραμματιστική Πλοήγηση στο Angular

Η πλοήγηση μέσω URLs μπορεί να γίνει όχι μόνο μέσω υπερσυνδέσμων, αλλά και μέσα στον κώδικα JavaScript, χρησιμοποιώντας ειδικές εντολές.

Αυτό γίνεται με τη χρήση της υπηρεσίας Router. Ας δούμε πώς να δουλέψουμε με αυτή. Αρχικά, ας την εισάγουμε:

app/app.component.tsimport { Router } from "@angular/router";

Τώρα ας την εγχύσουμε στο component μέσω εγχύσεως εξαρτήσεων:

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
}

Η υπηρεσία έχει τη μέθοδο navigate, η οποία πηγαίνει σε ένα δεδομένο URL. Ας χρησιμοποιήσουμε αυτή τη μέθοδο:

app/app.component.tsexport class AppComponent {
  constructor(private router: Router) {
  
  }
  
  go() {
    this.router.navigate(['/aaaa/']);
  }
}

Και τώρα ας καλέσουμε τη μέθοδο go πατώντας σε ένα κουμπί:

app/app.component.html<button (click)="go()">btn</button>