Defining routes…

Here’s a complex route definition. You can add more using commas. This route allows an id to be passed to the route. Also a guard is setup allowing access to the controlled. The final element is the component who’s template will be activated:

{ path: 'pets/:id', canActivate: [ petsGuard], canDeactivate: [petsDeactivate], component: PetsComponent }

We can call routes within the application using:

pets

or for a button with variable id:

pets

We can use to tell the template where to display the routed element.

To get the parameter from the route:

import {ActiveRoute} from '@angular/router';

constructor(private route: ActivatedRoute)
{
}

then inside the constructor or onInit use a snapshot or an observable:

   

   let id = +this.route.snapshot.params['id'];

   ...or...

   this.subcription = this.route.params.subscribe(p=>
   {
      let id = +p['id'];  
   }

remember to unsubscribe!