web-dev-qa-db-fra.com

Angular 2, sortie de routeur RC5 à l'intérieur d'une autre sortie de routeur

J'essaie de faire un projet avec une sortie de routeur à l'intérieur d'une autre sortie de routeur:

Cela fonctionnera comme ceci:

Dans le premier routeur-prise, il aura deux vues:

  • composant d'authentification (/ login)

  • composant admin (/ admin)

Ensuite, dans la deuxième sortie, l'intérieur du composant d'administration, avec ses propres routes, les rendra:

  • tableau de bord (/ admin)

  • profil (/ admin/profile)

  • utilisateurs (/ admin/users)

Maintenant, dans les Angular 2 docs, je peux voir qu'ils ont cette implémentation en utilisant des modules. Mais je ne veux pas utiliser plusieurs modules (ou je le dois?).

Existe-t-il un moyen de réaliser cette implémentation sans séparer les modules?

Je veux un composant par défaut pour la zone d'administration, c'est pourquoi je voulais le deuxième routeur-sortie, par exemple: Le tableau de bord aura le HeaderComponent, LeftNavComponent et DashboardCompoent. Mais la page de profil aura également tous ces HeaderComponent et LeftNavComponent, et la seule chose qui changerait est le ProfileComponent, donc il aura essentiellement la même structure. Je pense que je n'ai pas besoin de répéter chaque importation pour chaque page d'administration différente. Je voulais avoir un seul composant d'administration principal, qui aura un contenu dynamique basé sur l'itinéraire actuel.

J'ai déjà beaucoup essayé et cherché sur Internet, mais le seul exemple que j'ai pu trouver provient de la documentation officielle Angular 2. Mais ils l'implémentent avec plusieurs modules.

angularroutingangular2-routing
21
Thiago Yoithi

Bien que les modules soient recommandés, ils sont facultatifs pour toute navigation d'itinéraire.

Vous pouvez configurer le routage comme ci-dessous sans aucun module.

app.routing 

import { Routes, RouterModule }   from '@angular/router';

      import { DashboardComponent, 
         AdminComponent,
         ProfileComponent,
         UsersComponent
      } from './app.component';

      const appRoutes: Routes = [
      {
        path: '',
        redirectTo: '/dashboard/admin/users',
        pathMatch: 'full'
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        children:[
        {
         path : 'admin',
         component: AdminComponent,
         children:[
           {
            path : 'users',
            component: UsersComponent
           },
           {
            path : 'profile',
            component: ProfileComponent
           }
         ]
        }
       ]
     }
    ];

    export const routing = RouterModule.forRoot(appRoutes);

composants 

import { Component }          from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <h3 class="title">Routing Deep dive</h3>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AppComponent {
}


@Component({
  template: `
    <h3 class="title">Dashboard</h3>
    <nav>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class DashboardComponent {
}

@Component({
  template: `
    <h3 class="title">Admin</h3>
    <nav>
      <a routerLink="users" routerLinkActive="active" >Users</a>
      <a routerLink="profile" routerLinkActive="active" >Profile</a>
    </nav>
    <hr />
    <router-outlet></router-outlet>
  `
})
export class AdminComponent {
}

@Component({
  template: `
    <h3 class="title">Profile</h3>
  `
})
export class ProfileComponent {
}

@Component({
  template: `
    <h3 class="title">Users</h3>
    <hr />
  `
})
export class UsersComponent {
}

Voici le Plunker !!

J'espère que cela t'aides!!

27
Madhu Ranjan

Ajout d'une solution avec des modules chargés paresseux. Il s'agit d'une réponse générique en fonction du titre et non du corps de la question d'origine.

J'ai créé un module distinct nommé UserCheckinModule pour l'utilisateur non connecté contenant Login et Signup pages/composants car ils partagent généralement une conception et des fonctions/services communs.

Itinéraires définis dans app.routing.module.ts -

const routes: Routes = [
  { path: 'user', loadChildren: './user-checkin/user-checkin.module#UserCheckinModule' },
  { path: '**', redirectTo: 'user' }
];

Routes définies dans ser-checkin.-routing.module.ts pour le module UserCheckin -

const routes: Routes = [
  {
    path: '',
    component: CheckinComponent, // base template component
    children: [
      { path: '', redirectTo: 'login' },
      { path: 'login', component: LoginComponent },
      { path: 'signup', component: SignupComponent },
      { path: '**', redirectTo: 'login' }
    ]
  }
];

Le app.component.html contient déjà un router-outlet et se comporte comme le modèle/la disposition de base pour l'ensemble de l'application. UserCheckinModule est un module enfant et possède ses propres routes et modèle de base.

Contenu de checkin.component.html modèle de base -

<router-outlet></router-outlet>
1
Sujit Kumar Singh