CODEWITHSUNDEEP
angularangular2-routing
user3869623
user3869623

Reputation: 2413

Passing Multiple route params in Angular2

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

Upvotes: 101

Views: 162325

Answers (5)

Shem
Shem

Reputation: 318

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
}

Upvotes: 0

SUBAIR ANCHUKANDAN
SUBAIR ANCHUKANDAN

Reputation: 301

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

Upvotes: 20

user3869623
user3869623

Reputation: 2413

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

Upvotes: 101

trees_are_great
trees_are_great

Reputation: 3911

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},

Upvotes: 74

mayur
mayur

Reputation: 3618

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

Upvotes: 3

Related Questions