El siguiente post es continuación del resumen de Angular 2
Hay varias formas de hacer un router en angular, una de ellas es la siguiente utilizando:
Para el ejemplo partimos de :
Un componente cualqiera como puede ser login situdado en
/login/login.component
el cual exportamos:import { Component, NgZone } from '@angular/core'; @Component({ selector: 'my-login', templateUrl: 'login.component.html', styleUrls: ['login.component.scss'], }) export class LoginComponent { constructor() {} }
Creamos un modulo app-routing
app-routing.module.ts
, el cual importa:- Los componentes que vamos a routear
- NgModule
- Routes y RouterModule
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { LoginComponent } from './login/login.component';
En el modulo creamos un array de rutas del objeto Routes en el cual se indica el path y el componente a dicho path:
export const routes: Routes = [ { path: 'login', component: LoginComponent }, { path: 'register', component: RegisterComponent } ];
En @NgModule se importan las rutas para el routerModule y se exportan una vez añadidas las rutas:
@NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ], })
Por último exportamos AppRoutingModule
y además todos los componentes los cuales serán incluidos en AppModule para ser declarados, de esta forma no tenemos que importar uno a uno en AppModule, si no todos los componentes añadidos en el array de AppRoutingModule.
export class AppRoutingModule {}
export const routedComponents = [ LoginComponent, RegisterComponent ];
En definitiva AppRoutingModule sería por ejemplo:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './login/login.component';
export const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
];
@NgModule({
imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ],
})
export class AppRoutingModule {}
export const routedComponents = [ LoginComponent, RegisterComponent ];
Y en app.module se importa import { AppRoutingModule, routedComponents } from './app-routing.module';
para añadir a imports
AppRoutingModule y declarar en declarations
routedComponents.
app.module.ts
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppRoutingModule, routedComponents } from './app-routing.module';
import { AuthModule } from './shared/auth.module';
@NgModule({
imports: [
BrowserModule,
AppRoutingModule, // Important add AppRoutingModule
HttpModule
],
declarations: [
AppComponent,
routedComponents // All components in AppRoutingModule
],
bootstrap: [AppComponent]
})
export class AppModule { }