rutas - que es un componente en angular

Ejemplo de enrutamiento del módulo de características de Angular 2

Question

En cuanto al enrutamiento de Angular 2, he podido encontrar ejemplos del escenario donde hay exactamente un archivo de enrutamiento para toda la aplicación.

Me gustaría ver un ejemplo de uso no solo de un archivo de enrutamiento, sino de un archivo de enrutamiento principal y luego de al menos un archivo de enrutamiento del módulo de características.

Editar : me doy cuenta de que ya se ha formulado y respondido una pregunta similar . Hay dos razones por las que no creo que sea particularmente útil:

1) La pregunta es muy específica a la situación de ese usuario y, por lo tanto, hay mucho "ruido". Todo lo que estoy pidiendo es un único ejemplo aislado de enrutamiento del módulo de características.

2) Las respuestas a esa pregunta no parecen abordar cómo crear un archivo de enrutamiento para un módulo de características y luego volver a vincularlo al enrutamiento principal de la aplicación. Tal vez está allí y me estoy perdiendo, pero no lo veo allí.

Answer 1

Aquí hay un ejemplo de cómo manejo mi ruta con rutas secundarias. Creo que esto te ayudará y te enseñará a usar las rutas secundarias para proporcionar Guard para algunos de tus componentes. Esto asegurará algunas vistas si el usuario carece de autenticación. Separé el mío en public y secure enrutamiento de todo a través del diseño, luego cargando las rutas para las que se elige el diseño.

Asegúrese de exportar las rutas secundarias y de que se invoquen las rutas correctas en la ruta de diseño. También asegúrese de usar redirectTo en cada archivo de rutas secundarias.

Estamos definiendo nuestros diseños públicos o seguros. A continuación, proporcionar el archivo de rutas en cada uno de esos directorios para hacerse cargo una vez que se selecciona la ruta de creación.

app.routing.ts

const APP_ROUTES: Routes = [
    { path: '''', redirectTo: ''/home'', pathMatch: ''full'', },
    { path: '''', component: PublicComponent, data: { title: ''Public Views'' }, children: PUBLIC_ROUTES },
    { path: '''', component: SecureComponent, canActivate: [Guard], data: { title: ''Secure Views'' }, children: SECURE_ROUTES }
];

Entonces tengo una carpeta de diseños

diseños

layouts/public/public.components.ts
layouts/public/public.components.html
layouts/secure/secure.components.ts
layouts/secure/secure.components.html

secure.component.ts, que es el diseño, se ve así,

import { Component, OnInit }        from ''@angular/core'';
import { Router }                   from ''@angular/router'';
import { Auth }                     from ''./../services/auth.service'';

@Component({
    providers: [ Auth ],
    selector: ''app-dashboard'',
    templateUrl: ''./secure.component.html''
})
export class SecureComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

Luego, en su directorio seguro puede crear un componente y seleccionar la plantilla que usará para él,

@Component({
    providers: [ Auth ],
    templateUrl: ''./profile.component.html''
})
export class ProfileComponent implements OnInit {

    constructor( private router: Router, private auth: Auth, private http: Http  ) { }

    ngOnInit() { }
}

Ahora asegúrese de crear sus rutas secundarias en el directorio seguro y público. Una vez que se llega a la ruta, la ruta secundaria cargará la clase correcta y se procesará el archivo de la plantilla.

Recuerde que serán los hijos de sus diseños. De modo que puede colocar una barra de navegación y un pie de página en secure.component.html y se mostrará en todos sus componentes seguros. Porque estamos usando selectores para cargar el contenido. Todos sus componentes seguros y públicos se cargarán en el auto dentro del archivo html diseños.

rutas niño / public / piublic.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '''', redirectTo: ''home'', pathMatch: ''full'' },
    { path: ''p404'', component: p404Component },
    { path: ''e500'', component: e500Component },
    { path: ''login'', component: LoginComponent },
    { path: ''register'', component: RegisterComponent },
    { path: ''home'', component: HomeComponent }
];

/secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [
    { path: '''', redirectTo: ''overview'', pathMatch: ''full'' },
    { path: ''items'', component: ItemsComponent },
    { path: ''overview'', component: OverviewComponent },
    { path: ''profile'', component: ProfileComponent },
    { path: ''reports'', component: ReportsComponent }
];

Resumen

Hemos configurado un archivo de Angular2 inicial en el directorio raíz de nuestra aplicación Angular2 . Este archivo de ruta dirige el tráfico a uno de dos diseños dependiendo de si el usuario está autenticado o no. Si tienen la autenticación para cualquier distribución pública de ruta o distribución segura servida. Luego, cada uno de esos diseños tiene un grupo de rutas y componentes secundarios que se sirven en el diseño respectivo.

Entonces, para limpiar la estructura del archivo,

root = /

Tus principales rutas de aplicaciones que controlan qué diseño se ve.

/app.routing.ts

Diseños que mantienen los diseños seguros o públicos.

Público

`/layouts/public.components.ts
/layouts/public.components.html
/layouts/public.routing.ts`

Seguro

`/layouts/secure.components.ts
/layouts/secure.components.html
/layouts/secure.routing.ts`

directorio público que contiene todo lo que está abierto para ver sin autenticación.

/public/home-component.ts
/public/home-component.html

Directorio seguro que contiene las rutas y componentes necesarios para la autenticación.

/public/profile-component.ts
/public/profile-component.html

Answer 2

Veamos si este ejemplo cubre lo que estás buscando.

Estos son los módulos que se usan:

• AppModule (módulo raíz)
• UsersModule (módulo de funciones)

Los fragmentos a continuación están simplificados.

app.module.ts

import { UsersModule } from ''./users.module'';
import { AppRouting } from ''./app.routing'';

@NgModule({
  imports: [
    BrowserModule,
    UsersModule,
    AppRouting,
  ],
  declarations: [...],
  providers: [...],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.routing.ts

const appRoutes: Routes = [
  { path: '''', redirectTo: ''home'', pathMatch: ''full'' },
  { path: ''home'', component: Home },
  { path: ''**'', component: NotFound }, //always last
];

export const AppRouting = RouterModule.forRoot(appRoutes, { 
  useHash: true
});

users.module.ts

import { NgModule } from ''@angular/core'';
import { UsersRouting } from ''./users.routing'';

@NgModule({
  imports: [
    CommonModule, // ngFor, ngIf directives
    UsersRouting,
  ],
  declarations: [...],
  providers: [...]
})
export class UsersModule { }

users.routing

const usersRoutes: Routes = [
  { path: ''users'',
    children: [
      { path: '''', component: Users },
      { path: '':id'', component: User }
    ]
  }
];

export const UsersRouting = RouterModule.forChild(usersRoutes);

Plunker: http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview

El código de muestra incluye también AboutModule (módulo cargado diferido, incluye el ejemplo de resolución) pero no incluye un ejemplo de módulo compartido.

Puede encontrar más detalles en estas diapositivas: https://slides.com/gerardsans/ngpoland-amazing-ng2-router