Ediciones ENI Editorial | líder en informática
La inyección de dependencias
Principio básico
La inyección de dependencias es una implementación del pattern IoC (Inversion of Control o inversión de los controles, en español). El principio de este pattern es romper las dependencias entre los elementos.
En una organización clásica, un elemento es responsable de la gestión de la instanciación y del ciclo de vida de sus dependencias. Esto crea un enlace fuerte entre el elemento y sus dependencias.
class MyElment {
private myDependency: Dependency;
constructor() {
}
doSomething() => {
this.myDependency.doSomething();
this.myDependency = new Dependency();
}
} El pseudo-código anterior declara una clase MyElement, que contiene un método doSomething. En este método, se crea una nueva instancia de la clase Dependency para llamar a su método doSomething().
El código anterior crea una dependencia fuerte entre MyElement y Dependency.
El principio de la inyección de dependencias es delegar la instanciación y la gestión del ciclo de vida de las dependencias a un elemento externo.
class MyElement {
constructor(private myDependency: Dependency)...Inyección de dependencias en Angular
En el marco de Angular, un componente puede necesitar un servicio. Decimos que el componente depende del servicio. El framework Angular juega el papel de administrador de dependencias.
Con el objetivo de utilizar la inyección de dependencias, la primera etapa es guardar las dependencias de nuestra aplicación. Angular permite realizar esta operación a diferentes niveles.
1. Registro global
El nivel más alto es el de la aplicación en sí misma. Cuando se declara una dependencia a nivel de la aplicación, cada vez que un elemento del framework solicita esta dependencia, esta será la instancia que le será devuelta. Por lo tanto, las dependencias declaradas a este nivel se comportan como singletons.
La declaración de dependencias a este nivel se realiza durante la declaración del módulo de la aplicación. Es necesario utilizar la propiedad providers del decorador @NgModule. En este decorador, la manera más sencilla de registrar las dependencias es listar las clases que se deben inyectar.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ManzanaService } from './shared/manzana.servicio';
@NgModule({
declarations: [
AppComponent ...Provider
Hasta ahora, solo se ha abordado el método más sencillo de registro: haciendo referencia al tipo del elemento a inyectar en la propiedad provider de los decoradores @NgModule y @Component. Hay métodos más complejos, correspondientes a necesidades más específicas.
1. UseClass
Con el objetivo de guardar una dependencia, es posible utilizar el provider de clase UseClass. Este sirve para inyectar una versión alternativa de la implementación de una clase. Esto puede ser útil con fines de pruebas e incluso cuando un componente necesita una implementación diferente de un servicio.
Para utilizar este provider, hay que proporcionarle a la propiedad providers de los decoradores @NgModule o @Component un objeto que contenga dos propiedades. La primera propiedad es provide y se corresponde con el tipo que queremos guardar. La segunda es useClass. Esta propiedad debe contener el tipo que debe devolver el módulo de inyección de dependencias cuando un elemento solicita el tipo registrado en provide.
También es posible guardar un tipo de manera condicional usando una expresión ternaria, por ejemplo en la propiedad useClass. Sin embargo, hay que recordar que una vez que se registra la dependencia, la condición no se volverá a ejecutar.
providers: [
{
provide: ManzanaService,
useClass: environment.production
? ManzanaService
: ManzanaServiceMock
}
] En el ejemplo anterior, el módulo de inyección de dependencia devolverá una instancia de ManzanaService si la aplicación se ha compilado con la opción -prod. En caso contrario, devolverá una instancia de ManzanaServiceMock.
También es posible posicionar directamente una clase en la propiedad useClass.
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [
{ provide: ManzanaService, useClass: ManzanaMockService },
],
bootstrap: [AppComponent] ...