Angular 2 router not working with multiple parameters passed

6
votes

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.

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.

2
angularangular2-routing
try naming your second parameter something completely different, like "name" instead of "id2" - Jarod Moser
@JarodMoser it doesn't work I renamed id2 to name. I provided the plunker, if possible can you please try to edit that and see if it works. Thanks for the response. - VR1256
Sorry about the knee jerk reply, I've had some issues before naming params so close to eachother... @maxisam found the error for you - Jarod Moser
It looks like the accepted answer here was/is essentially "typo", so I will vote to put the question on hold. - halfer

2 Answers

5
votes

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

here is the working plunker

7
votes

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