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

我有三个分层导航,它从危机中心转移到危机细节,然后从危机细节 - > transactiondetail.因此,在我导航到危机细节之后,我想通过危机等待和危机等待,以便遍历细节,然后再回到危机清单.

我试图传递多个参数在这里有人有这个问题？

此外,我想隐藏浏览器URL中的URL参数并显示别名,以前用作"as"关键字现在它不起作用.

任何帮助赞赏

Answer 1

使用路由器组件(来自'@ 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

Answer 2

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

这是工作的plunker