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.

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.

try naming your second parameter something completely different, like "name" instead of "id2" — Jarod Moser
– Jarod Moser, Commented Jul 1, 2016 at 18:01
@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
– VR1256, Commented Jul 1, 2016 at 18:12
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
– Jarod Moser, Commented Jul 1, 2016 at 18:23
It looks like the accepted answer here was/is essentially "typo", so I will vote to put the question on hold. — halfer
– halfer, Commented Apr 17, 2020 at 19:33

Bernardo Pacheco · Accepted Answer · 2016-07-20 20:00:51Z

7

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

answered Jul 20, 2016 at 20:00

Bernardo Pacheco

1,4451 gold badge14 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

maxisam · Accepted Answer · 2016-07-01 18:15:52Z

5

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

here is the working plunker

answered Jul 1, 2016 at 18:15

maxisam

22.9k9 gold badges83 silver badges87 bronze badges

2 Comments

VR1256 Over a year ago

Thank you very much, how can I hide the id's that are appearing on the browser urlI want to use alias name instead of actual url with Id's appearing on browser URL. Earlies 'as' keyword and IsProd use to work now it not working. Can you please provide solution appreciate it.

maxisam Over a year ago

sorry, I don't know but I think you should start a different question for this one, so you can get people to help you.

Collectives™ on Stack Overflow

Angular 2 router not working with multiple parameters passed

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related