Angular 2 - Routage des sous-modules et <router-outlet> imbriqués

Question

Je suis à la recherche d'une solution avec Angular 2 pour le scénario expliqué ci-dessous :

Dans ce scénario, le top-nav contient des liens pour charger les submodules et le sub-nav des liens pour mettre à jour le contenu du submodule.

Les URLs doivent se présenter comme suit :

• /home => charge la page d'accueil dans le composant principal sortie de routeur
• /submodule => charge le sous-module dans la sortie du routeur du composant principal et affiche par défaut la page d'accueil du sous-module et la barre de navigation secondaire.
• /submodule/feature => charge la fonctionnalité à l'intérieur de la sortie du routeur du sous-module.

Le module d'application (et le composant d'application) contient une barre de navigation supérieure permettant d'accéder aux différents sous-modules. Le modèle de composant d'application pourrait ressembler à ceci

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Mais voilà la complexité. J'ai besoin que mes submodules aient une disposition similaire avec une barre de navigation de deuxième niveau et leur propre sortie de routeur pour charger leurs propres composants.

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

J'ai essayé toutes les options et j'ai cherché partout mais je n'ai pas trouvé de solution pour avoir un modèle par défaut (comme un composant d'application) dans le sous-module avec une sortie de routeur et aussi charger le contenu du sous-module dans la sortie de routeur interne sans perdre la sous-nav.

J'apprécierais toute contribution ou idée

Answer 1

La page html ressemblera à ceci.

Page principale

<top-navbar></top-navbar>
<router-outlet></router-outlet>

Page du sous-module

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

en cliquant sur la navigation dans la barre de navigation supérieure, la sortie de l'itinéraire principal sera acheminée respectivement.

en cliquant sur la barre de navigation secondaire, la sortie du routeur [sub] sera acheminée respectivement.

HTML c'est bien, le truc viendra à l'écriture de app.routing

app.routing.ts

const appRoutes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  { path: 'home',
    component: homeComponent,
    children: [
      {
        path: 'module1',
        component: module1Component,
        children: [
          {
            path: 'submodule11',
            component: submodule11Component,
          },
          {
            path: '',
            redirectTo: 'submodule11',
            pathMatch: 'full'
          }
        ]
      },
      {
        path: 'module2',
        component: module2omponent,
        children: [
          {
            path: 'submodule21',
            component: submodule21Component,
          },
          {
            path: '',
            redirectTo: 'submodule21',
            pathMatch: 'full'
          }
        ]
      }
    ]
  },
  {
    path: 'about',
    component: aboutComponent
  }
]

J'espère que cela vous aidera.

Plus de détails https://angular.io/guide/router

Answer 2

Utilisez :

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

Exemple complet :

HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...

Answer 3

Vous devez mentionner le nom du point de vente dans les routes mentionnez le nom de la sortie de votre routeur dans le routage comme ceci "outlet:'sub".

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
      ]
   },
];