In your particular example you'd do the following routerLink
:
[routerLink]="['user', user.id, 'details']"
To do so in a controller, you can inject Router
and use:
router.navigate(['user', user.id, 'details']);
More info in the Angular docs Link Parameters Array section of Routing & Navigation
Maybe it is really late answer but if you want to navigate another page with param you can,
[routerLink]="['/user', user.id, 'details']"
also you shouldn't forget about routing config like ,
[path: 'user/:id/details', component:userComponent, pathMatch: 'full']
First configure in table:
const routes: Routes = [
{
path: 'class/:id/enrollment/:guid',
component: ClassEnrollmentComponent
}
];
now in type script code:
this.router.navigate([`class/${classId}/enrollment/${4545455}`]);
receive params in another component
this.activatedRoute.params.subscribe(params => {
let id = params['id'];
let guid = params['guid'];
console.log(`${id},${guid}`);
});
There are multiple ways of achieving this.
The routerLink attribute requires you to import the routingModule into the feature module in case you lazy loaded the feature module or just import the app-routing-module if it is not automatically added to the AppModule imports array.
<a [routerLink]="['/user', user.id]">John Doe</a>
<a routerLink="urlString">John Doe</a> // urlString is computed in your component
// Inject Router into your component
// Inject ActivatedRoute into your component. This will allow the route to be done related to the current url
this._router.navigate(['user',user.id], {relativeTo: this._activatedRoute})
this._router.navigateByUrl(urlString).then((bool) => {}).catch()
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With