次のフォームを使用するための URL が必要な Angular 5 アプリがあります。
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);
これはうまくいきましたが、/transactions を追加するように変更したとき:
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 の他に、複数の子があります。