0

次のフォームを使用するための 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 の他に、複数の子があります。

4

2 に答える 2