web-dev-qa-db-fra.com

Routage imbriqué dans Angular 5

J'ai la structure de module suivante:

1- RootModule 

Avec routage comme suit:

const routes: Routes = [
  { path: '', redirectTo: 'app', pathMatch: 'full' }
];

2- AppModule

Avec routage comme suit:

const routes: Routes = [
   { 
        path: 'app', 
        component: AppComponent,
        children: [
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
           }
       ]
   }

];

De plus, AppModule importe MainModule qui n'est qu'un module de routage et est configuré comme suit:

const routes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            {
               path: 'index',
               loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
            },
            {
                path: '',
                redirectTo: 'index',
                pathMatch: 'full'
            }
       ]
  }

];

Maintenant, RootComponent est le point de départ:

@Component({
  selector: "app-root",
  template:  "<router-outlet></router-outlet>"
})
export class RootComponent implements OnInit {
  constructor() { }

  ngOnInit() {
 }
}

La AppComponent est définie comme:

<router-outlet></router-outlet>
<app-quick-sidebar></app-quick-sidebar>

Enfin, MainComponent est défini comme suit:

<app-header-nav></app-header-nav>
<router-outlet></router-outlet>
<app-footer></app-footer>

L’essentiel est d’acheminer l’application vers le composant/index de manière à passer par RooComponent -> AppComponent -> MainComponent -> IndexComponent

Jusqu'ici, avec les itinéraires ci-dessus, AppComponent est ignoré!

Une idée?

Merci

angularangular5angular-routingangular-router
4
Bill

Avec votre configuration d'itinéraires actuels, MainComponent n'est pas configuré dans le tableau d'enfants du chemin AppComponent. Alors, pourquoi apparaîtrait-il dans son modèle?

Pour le moment, votre configuration de routage fonctionnera comme ceci:

  • naviguez vers /app vous mènera à AppComponent
  • en naviguant vers /index, vous obtiendrez la IndexComponent.

Pour obtenir le comportement souhaité de RooComponent -> AppComponent -> MainComponent -> IndexComponent, la configuration de vos itinéraires doit ressembler à ceci:

const routes: Routes = [{ 
  path: '', 
  component: AppComponent,
  children: [{
    path: '',
    component: MainComponent,
    children: [{
      path: '', redirectTo: 'index', pathMatch: 'full'
    }, {
      path: 'index',
      loadChildren: '.\/..\/modules\/index\/index.module#IndexModule'
    }]
  }]
}];
3
Tomasz Kula

Merci pour la réponse. Votre solution a résolu le problème initial. Mais maintenant je vois un autre problème. Les fichiers de routage mis à jour sont les suivants:

1- root-routing.module.ts

const routes: Routes = [
 { 
    path: '', 
    redirectTo: 'index', 
    pathMatch: 'full' 
 }
];

2- app-routign.module.ts

const routes: Routes = [
{ 
    path: '', 
    component: AppComponent,
    children: [
        {
            path: '',
            component: Layout.HeaderFooterMainComponent,
            children: [
                {
                    path: '',
                    redirectTo: 'index',
                    pathMatch: 'full'
                },
                {
                    path: 'index',
                    loadChildren: '.\/modules\/index\/index.module#IndexModule'
                },
                {
                    path: '404',
                    loadChildren: '.\/modules\/not-found\/not-found.module#NotFoundModule'
                },
                {
                    path: '**',
                    redirectTo: '404',
                    pathMatch: 'full'
                }        
            ]
        }
    ]
}];

3- index.module.ts

const routes: Routes = [
{
    path: '',
    component: Layout.AsideLeftDefaultComponent,
    children: [
        {
            path: '',
            component: IndexComponent
        }
    ]
}];

Maintenant, si j'essaie d'accéder à une URL /index/d qui n'existe nulle part, je suis redirigé vers la page/404. Toutefois, le styles.bundle.css est en cours de chargement depuis /index/styles... au lieu de /styles.bundle.css. index est maintenant considéré comme un sous-dossier! Pourquoi est-ce que ça se passe?

0
Bill