Hola a todos, a partir de hoy escribiré una nueva serie de artículos llamada Bits de programación. Es una serie de artículos cortos que discuten algunos de los conceptos importantes de la programación. Este artículo es la parte 1 de la serie. Disfrutar !!!

La inyección de dependencia es un patrón de diseño en el que solicitamos dependencias de recursos externos en lugar de crearlas. Esta es una característica única en Angular moderno y ayuda a los desarrolladores a evitar problemas innecesarios en sus códigos.

Muchos desarrolladores no prestan mucha atención a cómo funciona la inyección de dependencia bajo el capó, ya que Angular se encarga de ello la mayor parte del tiempo. Sin embargo, puede comprender fácilmente cómo se comporta Angular en la mayoría de las situaciones si conoce los conceptos básicos de la inyección de dependencia.

Entonces, en este artículo, discutiré la inyección de dependencia jerárquica basada en componentes y basada en módulos en Angular para brindarle una mejor comprensión de cómo funciona la inyección de dependencia.

¿Qué es la inyección de dependencia jerárquica angular?

En Angular, se trata de niveles jerárquicos. Podemos crear módulos, componentes y servicios a diferentes niveles y agruparlos para compartir códigos entre ellos.

El mismo concepto se aplica a la inyección de dependencia. Podemos definir proveedores para dependencias en niveles de módulo , componente o directiva . Cuando inyectamos un servicio a un componente, Angular primero comenzará a buscar dependencias en la lista de proveedores de nivel de componente. Si no encuentra un proveedor, ascenderá en la jerarquía de componentes.

Este proceso continuará hasta que llegue al AppComponent. Si Angular aún no puede encontrar el proveedor de dependencia, le mostrará el mensaje de error "No se encontró ningún proveedor" .

Asimismo, esta jerarquía se aplica tanto a componentes como a módulos. Discutámoslos en detalle para comprender la diferencia entre la inyección de dependencia jerárquica de componente y módulo

Inyección de dependencia jerárquica de componente vs módulo

En Angular, es común tener componentes agrupados por módulos y la mayoría de los componentes tienen componentes secundarios. Entonces, podemos definir proveedores de dependencia en cualquier nivel.

Sin embargo, cuando se trata de la búsqueda de dependencias, Angular prioriza la jerarquía de componentes que la jerarquía de módulos.

Entonces, Angular primero buscará componentes secundarios y luego componentes principales. Si no se encuentran proveedores, la búsqueda continuará a nivel de módulo hasta llegar a AppModule.

Algunos podrían pensar que este proceso es complicado. Pero, en realidad, la inyección de dependencia jerárquica mejora tanto el rendimiento de la aplicación como la experiencia del desarrollador.

Ventajas de la inyección de dependencia jerárquica angular

La inyección de dependencia jerárquica permite definir proveedores de dependencia en un solo lugar y usarlos en múltiples ubicaciones. Este enfoque es realmente útil cuando se escala el proyecto y podemos definir proveedores de dependencia en el nivel superior del módulo.

Además, esto evita la inicialización innecesaria de la misma dependencia. Tomemos el ejemplo de iterar un componente secundario usando *ngFor.

<div>
<my-component *ngFor=”let data of allData“ [data]=”data”>  
  </my-component>
</div>

Aparte de eso, podemos usar la inyección de dependencia jerárquica para exponer un número limitado de dependencias de secciones aisladas a otras partes de la aplicación.

Conclusión

La inyección de dependencia es una de las características más importantes de Angular. En este breve artículo, discutí la importancia de la inyección de dependencia jerárquica en Angular.

Espero que hayas encontrado esto útil. Gracias por leer.

Aprende más