Angular 2 Router not working with multiple parameters passed

Question

I created a sample plunker, to pass in multiple parameter to the next page and it doesn't work. Here is the plunker demonstration where crisis center routing doesn't work after click on items.

http://plnkr.co/edit/ngNSsKBzAuhaP0EjKVJX?p=preview

 onSelect(crisis: Crisis) {
    // Navigate with Absolute link
    //this.router.navigate(['/crisis-center', 1]); //this is working.
     this.router.navigate(['/crisis-center', { id: '1', id2:'2'}]); //this is not working
    }

//below is the routes:

//{ path: 'crisis-center/:id', component: CrisisDetailComponent } //-- this is working
  { path: 'crisis-center/:id /:id2', component: CrisisDetailComponent}, // this is not working

ngOnInit() {
    this.sub = this.route
      .params
      .subscribe(params => {
        let id = +params['id'];
        let id2 = +params['id2']; //Unable to read id and id2 values
        this.service.getCrisis(id)
          .then(crisis => {
            if (crisis) {
              this.editName = crisis.name;
              this.crisis = crisis;
            } else { // id not found
              this.gotoCrises();
            }
          });
      });
  }

I have three layered navigation where it moves from crisis-center to crisis-details and then from crisi-details -> transactiondetail. So after I navigate to crisis details i want to pass crisisId and crisisdetailId to traverse back to detail and then crisis list.

I am trying to passing multiple parameter here anyone had this issue ?

Also, i want to hide the URL parameter from browser url and show alias name, previously 'as' keyword used to work now it doesn't work.

Any help appreciated

Answer 1

Using the Router component (from '@angular/router', not from '@angular/router-deprecated'), you pass multiple params as follows:

this.router.navigate(['/crisis-center', 1, 2]);

You were trying to do it:

this.router.navigate(['/crisis-center', { id: '1', id2:'2'}]); //this is not working

Because you've passed an object as a second argument, you were passing query parameters not router parameters. So, the URL for it is:

localhost:3000/crisis-center;id=1&id2=2

You can read more about it here: https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Answer 2

You have a space in between at crisis-center/:id /:id2

here is the working plunker