Utiliser des paramètres

configuration du routeur

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

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.

Naviguer avec un paramètre

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

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.