Angular 2 - Servicios
Un servicio se utiliza cuando es necesario proporcionar una funcionalidad común a varios módulos. Por ejemplo, podríamos tener una funcionalidad de base de datos que podría reutilizarse entre varios módulos. Y por lo tanto, podría crear un servicio que pudiera tener la funcionalidad de base de datos.
Los siguientes pasos clave deben llevarse a cabo al crear un servicio.
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. Los siguientes son los pasos involucrados.
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";
}
}
Es necesario señalar los siguientes puntos 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: 'demo-app',
template: '<div>{{value}}</div>',
providers: [appService]
})
export class AppComponent {
value: string = "";
constructor(private _appService: appService) { }
ngOnInit(): void {
this.value = this._appService.getApp();
}
}
Es necesario señalar los siguientes puntos sobre el programa anterior.
Primero, importamos nuestro módulo appService en el módulo appComponent.
Luego, registramos 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 ngOnInit lifecyclehook, llamamos a la función getApp del servicio y asignamos la salida a la propiedad value de la clase AppComponent.
Una vez que guarde todos los cambios de código y actualice el navegador, obtendrá el siguiente resultado.