2017-07-04 3 views
1

Compte tenu du module de routage racineangulaire 2 Router: Navigation vers d'autres composants

const appRoutes: Routes = [ 
    { 
     path: '', 
     component: HomeComponent, 
     children: [ 
      { 
       path: 'users', 
       loadChildren: './pages/users/users.module#UsersModule' 
      } 
     ] 
    }, 
    {path: '', redirectTo: '', pathMatch: 'full'}, 
    {path: '**', redirectTo: '/login'} 
]; 

export const appRouting: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

et les utilisateurs module de routage

const usersRoutes: Routes = [ 
    { 
     path: '', component: UsersComponent, 
     children: [ 
      {path: 'admittances', component: AdmittancesComponent}, 
      {path: 'admittance/:id', component: AdmittanceDetailComponent} 
     ] 
    } 
]; 

export const usersRouting: ModuleWithProviders = RouterModule.forChild(usersRoutes); 

je veux naviguer de la AdmittancesComponent au AdmittanceDetailComponent.

Mais, au lieu d'utiliser

this._router.navigate(['admittance', id]); // ERROR 

je dois plutôt utiliser

this._router.navigate(['users/admittance', id]); // WORKS 

Quelqu'un peut-il expliquer pourquoi le premier exemple ne fonctionne pas et pourquoi le second le fixe?

Répondre

2

Le lien suivant est de la documentation angulaire: https://angular.io/guide/router#relative-navigation

Pour le routage par rapport à l'aide du .navigate, vous avez besoin d'une syntaxe comme ceci:

this.router.navigate([crisis.id], { relativeTo: this.route }); 
+0

C'était l'indice manquant ! Je me demande pourquoi j'ai oublié ça ... – Glains

0

Il est assez simple Le appRoutes est la route principale, la route des utilisateurs est un enfant de votre route principale. Puisque vous avez défini le nom du chemin dans votre appRoutes en tant qu'utilisateurs, ce sera votre premier paramètre d'URL, donc domain.com/users/childRoutes ...

Maintenant que vous avez défini l'enfant appelé thats va être préfixé par vos parents utilisateurs Route/si domain.com/users/admitance

Il aurait travaillé la première déclaration si vous avez défini la route « admitance » dans vos appRoutes