Skip to content

Utiliser des paramètres

configuration du routeur

Dans la configuration du routeur, nous ajoutons où se trouve les paramètres dans l'URL :

js
import { RouterModule, Routes } from '@angular/router';

import {OtherComponent} from './other.component';
import {MainComponent} from './main.component';

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'main', component: MainComponent },
  { path: 'other/:id', component: OtherComponent }
];

export const routing = RouterModule.forRoot(routes);

:id indique que nous pouvons avoir un identifiant.

js
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <ul>
      <li><a [routerLink]="['/main']">main</a></li>
      <li><a [routerLink]="['/other', 1337]">other</a></li>
    </ul>
    <router-outlet></router-outlet>
  `
})
export class AppComponent {

}

Dans le template, nous ajoutons le paramètre (ici, l'id est 1337)

Récupérer le paramètre dans le composant

js
import {Component, OnInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';

@Component({
  selector: 'other',
  template: `
    Other with id {{id}}
    <button (click)="nav()">MainComponent</button>
  `
})
export class OtherComponent implements OnInit {
  id: number = 0;

  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    this.route.params.subscribe(params => {
       this.id = +params.id;
    });
  }

  nav() {
    this.router.navigate(['/main']);
  }

}

Nous chargeons et initialisons le service ActivatedRoute. Nous récupérons le paramètre avec un Observable lorsque le composant est initialisé.

Angular utilise un Observable car le composant est construit (constructor) qu'une fois alors que le paramètre, lui, peut changer. Il faut donc observer l'événement avec un Observable.

Abonnez-vous à la newsletter

En juillet, recevez en avant-première notre newsletter avec les dernières actualités, tutoriels, astuces et ressources Angular directement par email !