Angular 2 - Inyección de dependencia

La inyección de dependencia es la capacidad de agregar la funcionalidad de los componentes en tiempo de ejecución. Echemos un vistazo a un ejemplo y los pasos utilizados para implementar la inyección de dependencia.

Step 1- Crea una clase separada que tenga el decorador inyectable. El decorador inyectable permite inyectar y usar la funcionalidad de esta clase en cualquier módulo Angular JS.

@Injectable() 
   export class classname {  
}

Step 2 - A continuación, en su módulo appComponent o en el módulo en el que desea utilizar el servicio, debe definirlo como proveedor en el decorador @Component.

@Component ({  
   providers : [classname] 
})

Veamos un ejemplo sobre cómo lograr esto.

Step 1 - Crea un ts archivo para el servicio llamado app.service.ts.

Step 2 - Coloque el siguiente código en el archivo creado anteriormente.

import { 
   Injectable 
} from '@angular/core'; 

@Injectable() 
export class appService {  
   getApp(): string { 
      return "Hello world"; 
   } 
}

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior.

  • El decorador inyectable se importa del módulo angular / núcleo.

  • Estamos creando una clase llamada appService que está decorada con el decorador Injectable.

  • Estamos creando una función simple llamada getApp que devuelve una cadena simple llamada "Hola mundo".

Step 3 - En el archivo app.component.ts coloque el siguiente código.

import { 
   Component 
} from '@angular/core';  

import { 
   appService 
} from './app.service';  

@Component({ 
   selector: 'my-app', 
   template: '<div>{{value}}</div>', 
   providers: [appService]  
}) 

export class AppComponent { 
   value: string = ""; 
   constructor(private _appService: appService) { } 
   ngOnInit(): void { 
      this.value = this._appService.getApp(); 
   }   
}

Los siguientes puntos deben tenerse en cuenta sobre el programa anterior.

  • Primero, estamos importando nuestro módulo appService en el módulo appComponent.

  • Luego, estamos registrando el servicio como proveedor en este módulo.

  • En el constructor, definimos una variable llamada _appService del tipo appService para que se pueda llamar en cualquier parte del módulo appComponent.

  • Como ejemplo, en el ngOnInit lifecyclehook, llamamos a la función getApp del servicio y asignamos la salida a la propiedad value de la clase AppComponent.

Guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.