页面遵循参数的角度路由

Question

我有一个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中的参数后面创建一个子页面吗？

EDITCompanyTransactionsComponent同时用于父级和子级，因为还没有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
],
})