Is it possible to pass multiple route params e.g. like below need to pass id1 and id2 to the component B
@RouteConfig([
{path: '/component/:id :id2',name: 'MyCompB', component:MyCompB }
])
export class MyCompA {
onClick(){
this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
}
}
OK realized a mistake .. it has to be /:id/:id2
Anyway didn't find this in any tutorial or other StackOverflow question.
@RouteConfig([{path: '/component/:id/:id2',name: 'MyCompB', component:MyCompB}])
export class MyCompA {
onClick(){
this._router.navigate( ['MyCompB', {id: "someId", id2: "another ID"}]);
}
}
As detailed in this answer, mayur & user3869623's answer's are now relating to a deprecated router. You can now pass multiple parameters as follows:
To call router:
this.router.navigate(['/myUrlPath', "someId", "another ID"]);
In routes.ts:
{ path: 'myUrlpath/:id1/:id2', component: componentToGoTo},
:${id1}/test/:${id2}, component: DummyComponentComponent } it does not load the component for me , also additionally i have a relative path in my index.html <base href="./"> , if i just leave the path with just one param then it works but if I extend it to having /export/:${id2} it stops working , any ideas ?Two Methods for Passing Multiple route params in Angular
Method-1
In app.module.ts
Set path as component2.
imports: [
RouterModule.forRoot(
[ {path: 'component2/:id1/:id2', component: MyComp2}])
]
Call router to naviagte to MyComp2 with multiple params id1 and id2.
export class MyComp1 {
onClick(){
this._router.navigate( ['component2', "id1","id2"]);
}
}
Method-2
In app.module.ts
Set path as component2.
imports: [
RouterModule.forRoot(
[ {path: 'component2', component: MyComp2}])
]
Call router to naviagte to MyComp2 with multiple params id1 and id2.
export class MyComp1 {
onClick(){
this._router.navigate( ['component2', {id1: "id1 Value", id2:
"id2 Value"}]);
}
}
new AsyncRoute({path: '/demo/:demoKey1/:demoKey2', loader: () => {
return System.import('app/modules/demo/demo').then(m =>m.demoComponent);
}, name: 'demoPage'}),
export class demoComponent {
onClick(){
this._router.navigate( ['/demoPage', {demoKey1: "123", demoKey2: "234"}]);
}
}
For getting the nested ids, for example this link:
this.router.navigate(['main', 'child', 1, 'grandchild', 2]);
'/main/child/1/grandchild/2'
you can get the parent's ids with the route.parent, like this:
constructor(private route: ActivatedRoute) {}
ngOnInit() {
let grandchild = this.route.snapshopt.paramMap.get('grandchild'); // 2
let child = this.route.snapshopt.parent.paramMap.get('child'); // 1
}
