Question

我有一些这样的路线：

  { path: 'bill', component: BillListComponent },
  { path: 'bill/:id', component: BillDetailComponent },
  { path: 'bill/save', component: BillSaveComponent },
  { path: 'bill/save/:id', component: BillSaveComponent },

在我的组件中，按钮的响应方式类似于以下方法，但它们会导航到同一位置：

  redirectToBillDetail(item: Bill) {
      this.router.navigate(['bill', item.id]);
  }
  redirectToBillNew() {
      this.router.navigate(['bill/save']);
  }

它们都导航到BillDetailComponent（浏览器地址栏上的链接是正确的bill / save与bill / ID_1234）。谁能告诉我我错了吗？

Answer 1

问题在于Angular不知道save是否是:id参数的值。实际上，一旦找到匹配的路线，它将采用该路线。

要解决此问题，您应该先放置更具体的路线，所以：

{ path: 'bill', component: BillListComponent },
{ path: 'bill/save', component: BillSaveComponent },
{ path: 'bill/:id', component: BillDetailComponent },
{ path: 'bill/save/:id', component: BillSaveComponent },

这样，它只会在尝试匹配:id路由后才尝试save路由

Answer 2

您应该在调用组件中的ngOnInit中检查参数，然后调用路由器无法判断在save和save之间的必需功能：id

ngOnInit(){

if (this.route.snapshot.params['id']) {
        redirectToBillDetail(this.route.snapshot.params['id']);
    }
    else
     {
        redirectToNewBill();
      }
    }

角度5：两条路线（参数化和非参数化）导航到同一组件

2 个答案: