传递多个参数时，Angular 2路由器无法正常工作

Question

我创建了一个示例柱塞器，将多个参数传递给下一页，但它不起作用。这是在点击项目后危机中心路由不起作用的柱塞演示。

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
    }

//路由如下：

//{ 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();
            }
          });
      });
  }

我有三个层次的导航，从危机中心移动到危机细节，然后从清晰的细节->事务细节。因此，在我导航到crisis details之后，我想要传递crisisId和crisisdetailId来遍历回到detail，然后遍历crisis list。

我试图在这里传递多个参数。

另外，我想从浏览器URL中隐藏URL参数，并显示别名，以前的'as‘关键字现在不起作用。

Answer 1

你在crisis-center/:id /:id2的中间有一个空格

这是working plunker

Answer 2

使用路由器组件(从'@angular/router'，而不是从'@angular/router-deprecated')，)可以传递多个参数，如下所示：

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

你正试着这么做：

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

因为您已经传递了一个对象作为第二个参数，所以您传递的是查询参数而不是路由器参数。因此，它的URL是：

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

你可以在这里阅读更多信息：https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters