I know I can pass a parameter to routerLink for routes such as
/user/:id
by writing
[routerLink]="['/user', user.id]"
but what about routes such as this one:
/user/:id/details
Is there a way to set this parameter or should I consider a different URL scheme?
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
<button mat-button routerLink="...">View user</button> syntax ?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}`);
});
It's very simple
<a routerLink="/user/{{id}}/details"></a>
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()
constructor(private activatedRoute: ActivatedRoute) {
this.activatedRoute.queryParams.subscribe(params => {
console.log(params['type'])
}); }
This works for me!
app-routing.module.ts
const routes: Routes = [
{ path: 'products', component: ProductsComponent },
{ path: 'product/:id', component: ProductDetailsComponent },
{ path: '', redirectTo: '/products', pathMatch: 'full' },
];
In controller you can navigate like this,
this.router.navigate(['/products', productId]);
It will land you to path like this: http://localhost:4200/products/product-id
constructor(private activatedRoute: ActivatedRoute) {}
in the case you would use
`this.activatedRoute.parmas.subscribe(params => { console.log(params['type']) }); }`
so params instead of queryparamas to get the parameter from the url –
You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment.
For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.
