Χρήση παραμέτρων διαδρομών σε ένα στοιχείο στο Angular

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

Ας υποθέσουμε ότι έχουμε την ακόλουθη διαδρομή με παραμέτρους:

app/app.routes.tsconst routes: Routes = [
  { path: 'aaaa/:id', component: AaaaComponent },
  { path: 'bbbb', component: BbbbComponent },
];

Ας υποθέσουμε ότι έχουμε συνδέσμους για μετάβαση στο συγκεκριμένο στοιχείο με διάφορες παραμέτρους:

app/app.component.html<nav>
  <a
    routerLink="/aaaa/1"
    routerLinkActive="active"
  >
    1
  </a>
  <a
    routerLink="/aaaa/2"
    routerLinkActive="active"
  >
    2
  </a>
  <a
    routerLink="/aaaa/3"
    routerLinkActive="active"
  >
    3
  </a>
</nav>

Ας υποθέσουμε ότι στο θυγατρικό στοιχείο περιέχεται ο ακόλουθος πίνακας:

app/aaaa/aaaa.component.tslet arr: string = [
  'a', 'b', 'c', 'd', 'e'
];

export class AaaaComponent {

}

Ας λάβουμε ανάλογα με την τιμή της παραμέτρου διαδρομής το αντίστοιχο στοιχείο του πίνακα:

app/aaaa/aaaa.component.tsexport class AaaaComponent {
  constructor(private activateRoute: ActivatedRoute) {
    let params = activateRoute.snapshot.params;
    let id = params['id'];
    
    this.value = arr[id];
  }
}

Ας εμφανίσουμε το στοιχείο που λάβαμε στην προβολή:

app/aaaa/aaaa.component.htmlτιμή: {{ value }}

typescript[
  {
    name: 'user1',
    surn: 'surn1',
  },
  {
    name: 'user2',
    surn: 'surn2',
  },
  {
    name: 'user3',
    surn: 'surn3',
  },
]