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.

Answer 1

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

here is the working plunker