Tutorial Angular – 5. Componentes Maestro/Detalle

Componentes Maestro/Detalle


Por el momento, HeroesComponent muestra tanto la lista de héroes como los detalles del héroe seleccionado.
Mantener todas las características en un sólo componente a medida que la aplicación crece no sería fácil de mantener. Es mejor dividir los componentes grandes en sub-componentes de menor tamaño, cada uno especializado en una tarea específica.
En esta página daremos el primer paso en esa dirección moviendo los detalles del héroe un componente separado y reutilizable, HeroDetailsComponent.
HeroesComponent tan sólo presentará un listado de héroes.HeroDetailsComponent mostrará los detalles del héroe seleccionado.

Crea HeroDetailsComponent

Usa el CLI de Angular para generar un nuevo componente llamado hero-detail.

Este comando genera los ficheros de HeroDetailComponent y declara el componente en AppModule.

Escribe la plantilla

Corta el HTML del detalle del héroe al final de la plantilla de HeroesComponent y pégalo en la plantilla generada de HeroDetailComponent.
El HTML copiado hace referencia a selectedHero. El nuevo HeroDetailComponent puede mostrar cualquier héroe, no sólo el héroe seleccionado. Así pues, reemplaza «selectedHero» por «hero» en toda la plantilla.

Añade la propiedad @Input() hero

La plantilla de HeroDetailComponent está vinculada a la propiedad hero del componente, la cual es del tipo Hero.
Abre el fichero de clase HeroDetailComponent e importa el símbolo Hero.

La propiedad hero tiene que ser una propiedad de entrada (Input), anotada con el decorador @Input(), porque el componente externo HeroesComponent se vinculará a ella de este modo.

Modifica la sentencia de importación de @angular/core para incluir el símbolo Input.

Añade una propiedad hero, precedida por el decorador @Input().

Este es el único cambio que tenemos que hacer en la clase HeroDetailComponent. No hay más propiedades. No hay lógica de presentación. Este componente tan sólo recibe un objeto héroe a través de la propiedad hero y lo muestra.

Muestra HeroDetailsComponent

HeroesComponent todavía es una vista maestro/detalle.
Antes mostraba los detalles del héroe por sí misma, antes de que cortásemos ese trozo de la plantilla. Ahora delegará en HeroDetailComponent.
Los dos componentes tendrán una relación padre/hijo. El padre HeroesComponent controlará al hijo HeroDetailComponent enviando un nuevo héroe para mostrar cuando el usuario seleccione un héroe de la lista.
No vamos a cambiar la clase HeroesComponent pero sí cambiaremos la plantilla.

Actualiza la plantilla HeroesComponent

El selector de HeroDetailComponent es 'app-hero-detail'. Añade un elemento <app-hero-detail> cerca del final de la plantilla de HeroesComponent, donde antes estaba el detalle del héroe.

[hero]="selectedHero" es una vinculación de propiedad de Angular.
Es un vínculo de datos de un sentido desde la propiedad selectedHero de HeroesComponent hasta la propiedad hero del elemento de destino, el cual se mapea con la propiedad hero de HeroDetailComponent.
Ahora cuando el usuario hace clic en un héroe de la lista, selectedHero cambia. Cuando selectedHero cambia, la vínculación de propiedad actualiza hero y HeroDetailComponent muestra el nuevo héroe.
La plantilla HeroesComponent revisada debería quedar así:

El navegador se actualiza y la aplicación funciona de nuevo como antes.

¿Qué ha cambiado?

Como antes, cuando un usuario hace clic en el nombre de un héroe, sus detalles aparecen bajo la lista de héroes. Ahora HeroDetailComponent es el que muestra estos datos en lugar de HeroesComponent.
Refactorizar HeroesComponent en dos componentes tiene sus ventajas, tanto ahora como en el futuro:

    1. Hemos simplificado HeroesComponent reduciendo sus responsabilidades.
    2. Podemos evolucionar HeroDetailComponent en un editor de héroes sin tener que tocar el padre HeroesComponent
    3. Podemos evolucionar HeroesComponent sin tocar la vista de detalles del héroe.
    4. Podemos reutilizar HeroDetailComponent en la plantilla de un futuro componente.

Revisión final de código

Aquí está el código de los ficheros tratados en esta página y tu aplicación debería parecerse a este ejemplo / descarga ejemplo

Resumen

      • Hemos creado un HeroDetailComponent separado y reusable.
      • Hemos usado el vínculo de propiedad para dar control al padre HeroesComponent sobre el hijo HeroDetailComponent.
      • Hemos usado el decorador @Input para que la propiedad hero este disponible para vincularse con el componente externo HeroesComponent.

Nota: puedes encontrar el documento original de esta entrada en https://angular.io/tutorial/toh-pt3

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *