Angular 2, salida de enrutador RC5 dentro de otra salida de enrutador

routing angular2-routing

Question

Estoy tratando de hacer un proyecto con una salida de enrutador dentro de otra salida de enrutador:

Funcionará así:

En el primer router-outlet tendrá dos vistas:

• componente de autenticación (/ login)

• componente de administración (/ admin)

Luego, en la segunda salida, estará dentro del componente de administración, con sus propias rutas, que representarán lo siguiente:

• panel de control (/ admin)

• perfil (/ admin / perfil)

• usuarios (/ admin / usuarios)

Ahora, en los documentos de Angular 2, puedo ver que tienen esta implementación utilizando módulos. Pero no quiero usar varios módulos (o tengo que hacerlo).

¿Hay alguna manera de hacer esta implementación sin separar los módulos?

Quiero un componente predeterminado para el área de administración, por eso quería el segundo enrutador de salida, por ejemplo: el panel de control tendrá HeaderComponent, LeftNavComponent y DashboardCompoent. Pero la página de perfil tendrá también todos estos HeaderComponent y LeftNavComponent, y lo único que cambiaría es el ProfileComponent, por lo que tendrá básicamente la misma estructura. Creo que no necesito repetir cada importación para cada página de administración diferente. Quería tener un solo componente de administración principal, que tenga un contenido dinámico basado en la ruta actual.

Ya probé y busqué mucho en Internet, pero el único ejemplo que pude encontrar es el de la documentación oficial de Angular 2. Pero están implementando esto con múltiples módulos.

Answer 1

Añadiendo una solución con módulos cargados perezosos. Esta es una respuesta genérica según el título y no al cuerpo de la pregunta original.

UserCheckinModule un módulo separado llamado UserCheckinModule para UserCheckinModule no registrados que contienen páginas / componentes de Login y de registro, ya que generalmente comparten un diseño y funciones / servicios comunes.

Rutas definidas en app.routing.module.ts -

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

Rutas definidas en user-checkin.-routing.module.ts para el módulo 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'' }
    ]
  }
];

app.component.html ya contiene una router-outlet y se comporta como la plantilla / diseño base para toda la aplicación. El UserCheckinModule es un módulo secundario y tiene sus propias rutas y plantilla base.

Contenido de la plantilla base checkin.component.html -

<router-outlet></router-outlet> 

Answer 2

Aunque se recomiendan los módulos, son opcionales para cualquier navegación de ruta.

Puede configurar el enrutamiento como a continuación sin ningún módulo.

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);

componentes

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 {
}

¡Aquí está el Plunker !

¡¡Espero que esto ayude!!