角路由配页以下参数

Question

我有一个角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。任何想法我怎么能完成其在URL中的参数如下子页面？

编辑CompanyTransactionsComponent同时用于父母和孩子，因为现在还没有一个CompanyHomeComponent，所以没有输入子页面时，在交易页面将成为默认页面。还有除了CompanyTransactionsComponent我离开了保持代码的短多的孩​​子。

Answer 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,
},

Answer 2

transactions作为孩子的路线应该工作。由于路径匹配始终是URL的其余部分。

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

  @NgModule({
    imports: [
      RouterModule.forRoot(
        appRoutes,
      )
      // other imports here
    ],
  })