Récupérer des paramètres d’une URL en Angular2 à l’aide de ActivatedRoute

01 Août Récupérer des paramètres d’une URL en Angular2 à l’aide de ActivatedRoute

Pour pouvoir avoir une route à lequel on peut récupérer des paramètres

la première étape et d’ajouter la route avec le paramètre à afficher avec :ensuite le nom du paramètre exemple ( :id )

{ 
    path: '/product/:id',      
    component: ProductComponent 
},

Pour pouvoir récupérer ce paramètre on importe ActivatedRoute

Documentation sur ActivatedRoute

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

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  id: number;
  private sub: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id'];
    });
  }

}

On injecte ActivatedRoute dans notre constructeur pour qu’on peut récupérer notre paramètre grâce à la méthode Params

La dernière étape est d’afficher notre variable dans notre fichier html

<p>
  ID : {{id}}
</p>