Categorías
Angular Dev TypeScript

Por qué Angular no carga bien los datos cuando se reutilizan componentes y eso del Dependency Injection

Imagínese que usted tiene una tienda virtual y que a su producto se le pueden asignar atributos así:

Obviamente cada uno de estos selectores es un componente aparte que se reutiliza varias veces en el formulario. Y en este caso concreto, el selector del Termino depende del valor del Atributo para poder filtrar los datos. Obviamente no se pueden mostrar colores cuando lo que se está asignando es una talla.

Y en la imagen es claro que los Terminos para Color y Marca no se están mostrando bien. Para hacerlo más interesante resulta que si cambiamos el orden, el único que se muestra es el último.

Resulta que este problema se debe a la manera en que Angular maneja los servicios. Cuando se genera un servicio desde la consola, Angular asume que el servicio será un Singleton, es decir una única instancia para toda la aplicación, lo que se define justo en esta parte:

@Injectable({
  providedIn: 'root'
})
export class TerminoService extends ...

Quiere decir que el servicio tiene que lidiar simultaneamente con la consulta de los 3 campos Termino (cada selector implementa la carga del valor, según el id y el Atributo padre que le corresponde). Esto termina generando que los parámetros de la consulta se sobreescriban (el segundo sobrescribe los parámetros del primero y el tercero los parámetros del segundo y así sucesivamente). Claro! Pues porque el bendito servicio es un Singleton: Una única instancia para toda la aplicación. Claro! Entonces las consultas de los primeros campos fallarán y solo funcionará la consulta para el último.

La manera de lidiar el asunto es proveer (provide) el servicio en el componente ‘selector’ así:

@Component({
  selector: 'win-termino-select',
  templateUrl: './termino-select.component.html',
  styleUrls: ['./termino-select.component.scss'],
  providers: [
    TerminoService
  ],...

Al agregarlo a los providers, lo que se logra es que haya una instancia diferente para cada uno de los selectores y que así no se sobreescriban las consultas.

Después de todo no está de más darle una releída a la documentación sobre inyección de dependencias en Angular. Ahí les queda: https://angular.io/guide/dependency-injection

Deja una respuesta