angulaire 2 Route enfant

Question

J'ai configuré mon cheminement comme ceci:

const routes: Routes = [ 
     { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
     { path: 'dashboard', component: HomeComponent }, 
     { 
      path: 'contact', component: ContactComponent, 
      children: [  
      { 
       path: '', 
       component: ContactComponent 
      }, 
      { 
       path: 'list', 
       component: ContactlistComponent 
      },  
      ] 

     }, 
     // { path: 'list', component: ContactlistComponent }, 
     { path: 'configuration/forms', component: FormsComponent } 
     ]; 

Voici mes liens:

<a [routerLink]="/contact/list">List</a> 
<a [routerLink]="/contact">Add New</a> 

Alors, quand je clique sur les liens mon lien de contact devient ouvert.

Ici, quand je fais cela fonctionne:

const routes: Routes = [ 
      { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
      { path: 'dashboard', component: HomeComponent }, 
      { 
       path: 'contact', component: ContactComponent,    
      }, 
      { path: 'contact/list', component: ContactlistComponent }, 
      { path: 'configuration/forms', component: FormsComponent } 
      ]; 

ce que je fais mal ici?

Answer 1

Vous devez ajouter pathMatch: 'full' à votre premier itinéraire enfant (celui avec le chemin vide), ou contact/list correspondra également au premier itinéraire.

const routes: Routes = [ 
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
{ path: 'dashboard', component: HomeComponent }, 
{ 
    path: 'contact', component: ContactComponent, 
    children: [  
    { 
     path: '', 
     component: ContactComponent, 
     pathMatch: 'full' 
    }, 
    { 
     path: 'list', 
     component: ContactlistComponent 
    },  
    ] 

}, 
// { path: 'list', component: ContactlistComponent }, 
{ path: 'configuration/forms', component: FormsComponent } 
]; 

Answer 2

Vous pouvez utiliser Parent itinéraire à l'aide du présent code

const routes: Routes = [ 
     { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, 
     { path: 'dashboard', component: HomeComponent }, 
     { 
      path: 'contact', component: ContactComponent,children:ChilddataRoute 


     }, 
     // { path: 'list', component: ContactlistComponent }, 
     { path: 'configuration/forms', component: FormsComponent } 
     ]; 

Vous pouvez utiliser la route des enfants avec un autre fichier d'enregistrement

export const ChilddataRoute: Routes = [ 
    { path: '', component: ContactComponent }, 
    { path: '/list', component: ContactlistComponent }, 
];