0

我有一个 Angular 5 应用程序，我需要一个 URL 才能使用以下形式：

www.example.com/#/company/<companyId>/transactions

我正在使用未命名的路由器插座<router-outlet></router-outlet>

companyId 是一个参数。最初，我在路由器中保留了事务部分，并验证我可以正确访问与 CompanyTransactionsComponent 关联的事务页面。

路由器规则是：

www.example.com/#/company/<id>/
{ path: 'company/:companyId', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId);

效果很好，但是当我更改为添加/事务时：

www.example.com/#/company/<id>/transactions/
{ path: 'company/:companyId/transactions', component: CompanyTransactionsComponent }
this.router.navigateByUrl('/company/' + user.companyId + '/transactions/');

这给了我一个错误Cannot match any routes.，所以我尝试了以下几个其他选项：

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent
        }
    ]
},

和：

RouterModule.forRoot([
    { path: 'company/:companyId', component: CompanyTransactionsComponent }
],
RouterModule.forChild([
    { 
        path: 'company/:companyId',
        children: [
            {
                path: 'transactions',
                component: CompanyTransactionsComponent
            }
        ]
    },
])

两者都给出相同的错误。这似乎只是因为我在参数 /:companyId 之后使用了 /transactions。知道如何在 url 中的参数之后完成子页面吗？

EDIT CompanyTransactionsComponent 用于父子组件，因为还没有 CompanyHomeComponent，所以当没有进入子页面时，交易页面将是默认页面。除了 CompanyTransactionsComponent 之外，还有多个子组件我省略了以保持代码更短。

4

2 回答 2

1

如果您要路由到同一个组件，“子页面”的目的是什么？

此代码将允许您在 URL 中使用带有附加文本的路由。但是，如果您确实希望拥有一个“子页面”，它应该路由到不同的组件以显示该“子页面”。

{ 
    path: 'company/:companyId', 
    component: CompanyTransactionsComponent,
    children: [
        {
            path: 'transactions',
            component: CompanyTransactionsComponent  //<-- This should be the "sub page"
        }
    ]
},

此外，当children像上面那样定义属性时，通常会<router-outlet></router-outlet>在“父”组件的模板中添加第二个。在此示例中，它将是CompanyTransactionsComponent模板。

如果您真的不需要显示另一条路线，那么应该这样做：

{ 
    path: 'company/:companyId/transactions', 
    component: CompanyTransactionsComponent,
},
于 2019-02-01T20:22:40.507 回答
0

transactions因为子路线应该有效。因为路径匹配始终是 url 的剩余部分。

const appRoutes: Routes = [{
    path: 'company/:companyId',
    component: CompanyTransactionsComponent,
    children: [
      {
        path: 'transactions',
        component: CompanyTransactionsComponent
      }
    ]
  }];

  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
      )
      // other imports here
    ],
  })
于 2019-02-01T20:20:07.787 回答