Angular — Compartir Dependencias a Través de Componentes

Uno de los aspectos más importantes de la arquitectura de Angular es cómo compartir y gestionar la información entre distintos módulos o componentes de una manera eficiente y clara.

Los servicios son una herramienta poderosa que permite compartir lógica y datos entre componentes. Sin embargo, es crucial entender no solo cómo inyectar y compartir servicios, sino también por qué es importante hacerlo de manera estratégica para mantener una arquitectura modular, escalable y fácil de mantener.

Inyección de Dependencias y Reutilización de Instancias

Cuando un servicio se proporciona a través del inyector de un componente padre, todos los componentes hijos tienen acceso a ese servicio y comparten la misma instancia.

Este patrón de reutilización evita la creación innecesaria de múltiples instancias del mismo servicio y facilita la comunicación y sincronización de datos entre los componentes.

Paso 1: Crear el Componente Favorites

ng generate component products/favorites

Paso 2: Añadir el Componente Favorites al Template del Componente ProductList

Una vez creado el componente Favorites, se añade al archivo product-list.component.html, donde ya se está mostrando una lista de productos

<h2>Lista de Productos</h2>
<ul>
  <li *ngFor="let product of products | sort" 
      (click)="selectedProduct = product">
    {{product.name}}
  </li>
</ul>

<app-product-detail 
  *ngIf="selectedProduct; else noProduct" 
  [product]="selectedProduct" 
  (bought)="onBuy()">
</app-product-detail>
<ng-template #noProduct>
  <p>¡No se ha seleccionado ningún producto!</p>
</ng-template>
<h2>Favoritos</h2>
<app-favorites></app-favorites>

Paso 3: Proveer el Servicio ProductsService en el Componente Padre

Se modifica el archivo product-list.component.ts para que el servicio ProductsService esté disponible para ProductListComponent y todos sus componentes hijos, incluyendo FavoritesComponent. Esto permite compartir la misma instancia del servicio entre ellos. Se hace agregando el servicio en la propiedad providers del decorador @Component:

import { Component } from '@angular/core';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-product-list',
  templateUrl: './product-list.component.html',
  styleUrls: ['./product-list.component.css'],
  providers: [ProductsService]  // Proveer el servicio aquí
})
export class ProductListComponent {
  // Lógica del componente
}

Paso 4: Utilizar el Servicio en FavoritesComponent

Se modifica el archivo favorites.component.ts para que pueda obtener la lista de productos desde el ProductsService.

import { Component, OnInit } from '@angular/core';
import { Product } from '../product';
import { ProductsService } from '../products.service';

@Component({
  selector: 'app-favorites',
  templateUrl: './favorites.component.html',
  styleUrls: ['./favorites.component.css']
})
export class FavoritesComponent implements OnInit {
  products: Product[] = [];

  // Inyección de dependencias en el constructor mediante parámetro
  constructor(private productService: ProductsService) { }

  ngOnInit(): void {
    // Obtener productos desde el servicio
    this.products = this.productService.getProducts();  
  }
}

Se inyecta el ProductsService en el constructor de FavoritesComponent, lo que permite acceder a su funcionalidad y obtener una lista de productos. Dado que el servicio fue registrado en el componente padre (ProductListComponent), no es necesario volver a registrarlo en FavoritesComponent.

Paso 5: Mostrar los Productos Favoritos

En el archivo favorites.component.html se usa la directiva *ngFor para mostrar solo un subconjunto de los productos (los favoritos), aplicando el pipe slice (por simple comodidad para no crear lógica nueva).

<ul>
  <li *ngFor="let product of products | slice:1:3">
    {{product.name}}
  </li>
</ul>

Este código muestra solo dos productos de la lista, comenzando desde el segundo. De esta forma, FavoritesComponent mostrará los productos favoritos seleccionados.

Favoritos solo muestra dos productos ya que en su vista se usó slice para simular productos favoritos

¿Por Qué Es Importante Compartir Servicios de Esta Manera?

Este ejemplo demuestra cómo un servicio puede compartirse entre un componente padre y sus componentes hijos. Esto ofrece varias ventajas desde el punto de vista de la arquitectura de software:

1. Reutilización de Instancias: Compartir una única instancia de un servicio entre múltiples componentes ahorra recursos y asegura que todos trabajen con los mismos datos. Esto es fundamental para mantener la consistencia en la aplicación.
2. Desacoplamiento: Al inyectar servicios, los componentes no necesitan conocer los detalles internos de cómo se obtienen o manejan los datos. Esto los hace más fáciles de mantener y reutilizar.
3. Control y Encapsulamiento: Proveer servicios a nivel de componente (en lugar de a nivel de aplicación) permite un mayor control sobre quién tiene acceso a esos servicios. En aplicaciones grandes, es esencial restringir el acceso a ciertos servicios para evitar que componentes no relacionados interfieran entre sí.
4. Escalabilidad: Este enfoque modular facilita la escalabilidad de la aplicación. A medida que se añaden más componentes, el patrón de inyección de dependencias asegura que cada uno solo reciba lo que necesita, evitando la sobrecarga de servicios innecesarios.

Fuente: Learning Angular, 4th edition, Bampakos — Deeleman