Angular 2 路由器无法处理传递的多个参数

Question

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

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

我有三层导航，它从危机中心移动到危机详细信息，然后从危机详细信息-> 交易详细信息。 因此，在导航到危机详细信息后，我想传递危机 ID 和危机详细信息以返回详细信息，然后返回危机列表。

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

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

Answer 1

使用 Router 组件（来自'@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

因为您已将对象作为第二个参数传递，所以您传递的是查询参数而不是路由器参数。 所以，它的网址是：

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

您可以在此处阅读更多相关信息： https : //angular.io/docs/ts/latest/guide/router.html#!#query-parameters

Answer 2

您在crisis-center/:id /:id2之间有一个空格

这是工作的plunker