web-dev-qa-db-ja.com

angular 2でデフォルトで子ルートをロードする方法

アプリケーションの開始時に、子ルートをロードします。

現時点ではURLcomeですが、それぞれのコンポーネントはそのセクションにはロードされませんが、実際のURLに再度アクセスすると表示されます。

ルート設定は

  const appRoutes: Routes = [
        { path: 'a', component: AComponent,
         children:[
                   { path:'x',component:AXcomponent }
                   ]
        },
        { path: 'b', component: bComponent, }
]

今、私はパスをロードしたいa/xページの先頭でどのようにロードしますか？

angularroutes
25
Rituraj ratan

空のパスルートを自動的にリダイレクトとして追加する

const appRoutes: Routes = [
    {
        path:'',
        redirectTo: 'a',
        pathMatch: 'full' 
    },
    {
        path: 'a',
        component: AComponent,
        children:[
            {
                path:'',
                redirectTo: 'x',
                pathMatch: 'full' 
            },
            {
                path:'x',
                component: AXcomponent 
            }
        ]
    },
    { 
        path: 'b',
        component: bComponent
    }
];
56
Santanu Biswas

子ルートにコンセントが含まれている場合、受け入れられた答えは良くありません。

たとえば、IDで「注文」を表示し、サマリーおよびその他のパネルに名前付きアウトレット「詳細」を使用しています。

/orders/5000001/(detail:summary)
/orders/5000001/(detail:edit)

これらのURLは非常にいため、次の2つのURLもリダイレクトする必要がありました。

/orders/5000001           =>    /orders/5000001/(detail:summary)
/orders/5000001/summary   =>    /orders/5000001/(detail:summary)

そこで、子でコンポーネントレスリダイレクトを試みました。

{ path: '', pathMatch: 'full', redirectTo: '(detail:summary)' }

「redirectTo」は絶対である必要があるため、これは失敗します（これには複雑な技術的理由があると確信しています）。それで私はこれを試しました：

{ path: '', pathMatch: 'full', redirectTo: '/order/:id/(detail:summary)' }

:idは、子のコンテキストでは名前付き変数ではないため、失敗します。

結局、私はこれを理解しました：

 children: [

     { path: ':id', pathMatch: 'full', redirectTo: '/orders/:id/(detail:summary)' },
     { path: ':id/summary', pathMatch: 'full', redirectTo: '/orders/:id/(detail:summary)' },
     {
         // this goes in the main router outlet
         path: ':id', component: OrderFulldetailsComponent,

         children: [

             { path: 'summary', component: OrderSummaryComponent, outlet: 'detail' },
             { path: 'edit', component: OrderEditComponent, outlet: 'detail' }
         ]
     }
 ]

pathMatch: 'full'でpath: ':id'を実行することが重要です。そうしないと、/:id/(detail:summary)を押してどこにも行かないときに一致します。

3
Simon_Weaver