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.