Subir archivos con Angular2
Subir archivos con Angular2

Las Child Routes en Angular 2 nos permiten agrupar rutas de forma dinámica asociadas a una ruta padre, en este ejemplo vamos a crear una ruta users, en esta ruta mostraremos a todos los usuarios y éstos tendrán diversas rutas, cada una asociada a un usuario, ruta de perfil y ruta de jobs en nuestro caso.

De esta forma podremos tener en una misma ruta al componente padre y también al hijo, en este caso será el componente user y profile o jobs.

Así veremos de que forma podemos configurar Child Routes en Angular 2 y realizar la navegación utilizando la directiva routerLink, algo muy interesante.

Enlaces de interés:

Child Routes en Angular 2, aplicaciones más dinámicas

Si quieres puedes descargar el ejemplo completo desde mi repositorio de github.

Ahora que ya tienes el proyecto vamos a ir viendo la aplicación de forma completa paso a paso, lo primero que debemos crear es el archivo index.html en la raíz de la aplicación con el siguiente código, algo ya muy conocido.


Ahora que tenemos el index.html recuerda crear los archivos tsconfig.json y package.json.


Llegados a este punto vamos a definir el corazón de nuestra aplicación, el archivo app.ts justo en la raíz del proyecto, una vez creado le añadimos el siguiente código que pasamos a explicar.


Aquí pasan cosas muy interesantes, pero hay una que debe destacar y mucho, y es la siguiente línea.


De esta forma podemos definir Child Routes en Angular 2, la ruta users/nombreusuario/cualquier cosa podrá ser atendida de forma dinámica haciendo la carga de un componente hijo, por ejemplo, la ruta para mostrar mi perfil podría ser users/iparra/profile, así de sencillo.

En este punto vamos a empezar a desarrollar el resto de componentes que pertenecen a los usuarios a fin de completar la aplicación, primero vamos a crear el componente UsersComponent, así que crea el directorio src/users/list/component.ts con el siguiente código.


Este componente simplemente mostrará a todos los usuarios de nuestra aplicación, no tiene nada que ver con las Child Routes en Angular 2 pero nos ayudarán a entender cómo llegar a ellas. Ahora crea el archivo src/users/list/users.html con el siguiente código.


Aquí está, con la línea [routerLink]=”[‘/User’, {name: user.name}, ‘UserJobsComponent’]” podemos navegar a la ruta User y le decimos que debe utilizar el componente UserProfileComponent, así podemos acceder a la ruta hija en Angular 2.

Llegados a este punto debe saltar una pregunta, ¿donde hemos definido las Child Routes?, de momento en ningún sitio, hemos definido una ruta que acepta Child Routes pero no las rutas, éstas deben ser definidas en la ruta padre, en este caso en el componente UserComponent, así que vamos a crearlo.

Crea el archivo src/users/user/component.ts con el siguiente código que pasamos a explicar.


En este componente estamos definiendo las rutas hijas del UserComponent, en este caso las rutas profile y jobs, estas rutas atenderán a users/iparra/profile y users/iparra/jobs siendo el usuario iparra, aunque eso será dinámico.

Cómo puedes ver, debemos utilizar la directiva router-outlet en la template de este componente para que las rutas hijas puedan ser mostradas.

Llegados a este punto sólo nos queda definir los componentes UserJobsComponent y UserProfileComponent, crea el archivo src/users/jobs/component.ts con el siguiente código para definir el componente UserJobsComponent.


Algo muy interesante es la forma en la que debemos utilizar Injector para acceder a los parámetros de esta ruta, de otra forma no podemos acceder a los parámetros enviados desde la ruta padre.

El componente ProfileComponent es exactamente igual, puedes crearlo en src/users/profile/component.ts con el siguiente código para poder tener una navegación completa en nuestra aplicación.


Este es la forma en la que podemos definir Child Routes en Angular 2, de aquí en adelante simplemente debes saber interpretar cuando vas a necesitar Child Routes y realizar esta configuración, espero que te haya parecido interesante, creo que lo es y mucho.