web-dev-qa-db-fra.com

Angular 2 - Routage de sous-module et <routeur-prise> imbriqué

Je cherche une solution avec Angular 2 pour le scénario expliqué ci-dessous:

enter image description here

Dans ce scénario, la navigation du haut contient des liens pour charger des sous-modules et des sous-navigations pour mettre à jour le contenu du sous-module.

Les URL doivent correspondre comme suit:

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

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

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

Mais voici la complexité. J'ai besoin que mes sous-modules aient une disposition similaire avec une barre de navigation de deuxième niveau et leur propre prise de routeur pour charger leurs propres composants.

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

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

J'apprécierais n'importe quelle entrée ou idées

angularrouting
62
Ron F

La page html ressemblera à ceci.

Page principale 

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

Page de sous-module 

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

en cliquant sur la navigation dans la barre supérieure de navigation, le point de vente principal de la route va router.

en cliquant sur la sous-barre de navigation, le routeur-sortie [sous] routera respectivement.

HTML, c'est bien, l'astuce viendra lors de 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

38
Aswin KV

Utilisation:

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]
      }
    ]),
...
15
thxmxx

vous devez mentionner le nom de la prise dans les itinéraires, mentionner le nom de votre routeur dans l'acheminement, comme ceci: "sortie: '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"},
        ]},
 

];
0
Nambi N Rajan