web-dev-qa-db-fra.com

Comment charger la route enfant par défaut dans angular 2

Au début de l'application, je veux charger la route enfant.

En ce moment, URLcome mais le composant respectif ne se charge pas sur cette section, mais quand il frappe à nouveau l'URL réelle, elle vient.

comme configurer l'itinéraire est

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

Maintenant, je veux charger le chemin a/x comment vais-je charger en début de page?

angularroutes
25
Rituraj ratan

Ajouter des itinéraires de chemin vides comme redirection automatiquement

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

La réponse acceptée n'est pas bonne si votre itinéraire enfant contient un exutoire.

Par exemple, j'affiche une "commande" par ID et j'utilise un "détail" de sortie nommée pour le résumé ainsi que d'autres panneaux.

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

Parce que ces URL sont si laides, je voulais également que les deux suivantes soient redirigées:

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

J'ai donc essayé une redirection sans composant chez l'enfant:

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

Cela échoue car un 'redirectTo' doit être absolu (je suis sûr qu'il y a une raison technique complexe à cela). Alors j'ai essayé ceci:

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

Et cela échoue car :id N'est pas une variable nommée dans le contexte de l'enfant.

Donc, à la fin, j'ai compris cela:

 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' }
         ]
     }
 ]

Notez qu'il est important de faire pathMatch: 'full' Sur path: ':id' Ou cela correspondra lorsque vous appuyez sur /:id/(detail:summary) et n'allez nulle part.

3
Simon_Weaver