Користење на параметри на рути во компонента во 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',
  },
]