Release 4, semana 8

Objetivos de aprendizaje

• Agregar un componente de detalle que el listado abre al hacer clic en un recurso, reutilizando el servicio compartido que ya quedó unificado en Release 3.

Entregable Release 4 en el Front

1. Desarrollar un componente de detalle para cada una de las entidades.
2. Modificar el componente listar de cada entidad para que al hacer clic se muestre el componente detalle correspondiente.

Ejemplo

Se muestra el componente listar de artistas. Al dar clic en uno de ellos, se muestra el detalle de su información y la lista de sus álbumes. Si el usuario selecciona un álbum, se muestra el listado de sus canciones.

Diagrama de clases (ejemplo)

Con Xyz = Artista como ejemplo: ArtistListComponent incluye directamente a ArtistDetailComponent (es su hijo en el template), y ambos inyectan el mismo ArtistaService. El detalle lee el artista del signal seleccionado que vive en el servicio.

classDiagram
    class ArtistaService {
        +artistasResource: HttpResource
        +seleccionado: Signal
        +crear(nuevoArtista: NuevoArtista) Observable
    }

    class ArtistListComponent {
        -artistaService: ArtistaService
        +seleccionar(artista: Artista) void
    }

    class ArtistDetailComponent {
        -artistaService: ArtistaService
        +cerrar() void
    }

    ArtistListComponent *-- ArtistDetailComponent : incluye
    ArtistListComponent ..> ArtistaService : inyecta
    ArtistDetailComponent ..> ArtistaService : inyecta

Material de referencia

Tutoriales

1. Componente de detalle