Angular2 single parameter routing not working

Question

my simple routing is not working and I don't know why... The command below reported load the PageNotFoundComponent instead of OffertDetailComponent

app.routing

{
    path: "OffertDetail/:idOffert",
    component: OffertDetailComponent
},
{
    path: '**',
    component: PageNotFoundComponent
}

route command

this.router.navigate(['OffertDetail', {idOffert: 1073}]);

If i remove the "/idOffert" from ap.Routing and the parameter from the command, the component loads properly.

Thanks to support

Tyler Jennings · Accepted Answer · 2017-04-12 16:25:15Z

1

I believe you are mixing query params and route params. Try changing your router.navigate to the following while keeping the path as "OffertDetail/:idOffert":

this.router.navigate(['OffertDetail', '1073']);

From https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

To set query params:

// Set our navigation extras object
// that contains our global query params and fragment
let navigationExtras: NavigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

To use route params:

this.router.navigate(['/hero', hero.id]);

And the parameter gets the name of the :param from the router config.

To pass two route parameters Say our path in our route config is path: "OffertDetail/:idOffert/detail/:someId", we could pass parameters to that like this:

this.router.navigate(['/OffertDetail', someParameter, 'detail', someOtherValue]);

edited Apr 12, 2017 at 16:25

answered Apr 12, 2017 at 16:11

Tyler Jennings

8,9212 gold badges46 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DarioN1 Over a year ago

thanks, this work. Just to complete, can you provide me a simple code that shows how to pass 2 parameters instead of 1 ?

Collectives™ on Stack Overflow

Angular2 single parameter routing not working

app.routing

route command

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

app.routing

route command

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related