CODEWITHSUNDEEP
angulartypescriptparameter-passing
DarioN1
DarioN1

Reputation: 2552

Angular2 single parameter routing not working

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

Upvotes: 1

Views: 901

Answers (1)

Tyler Jennings
Tyler Jennings

Reputation: 8911

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]);

Upvotes: 1

Related Questions