Angular 2 - Servizi
Un servizio viene utilizzato quando una funzionalità comune deve essere fornita a vari moduli. Ad esempio, potremmo avere una funzionalità di database che potrebbe essere riutilizzata tra vari moduli. E quindi potresti creare un servizio che potrebbe avere la funzionalità del database.
I seguenti passaggi chiave devono essere eseguiti durante la creazione di un servizio.
Step 1- Creare una classe separata che abbia il decoratore iniettabile. Il decoratore iniettabile consente di iniettare e utilizzare la funzionalità di questa classe in qualsiasi modulo JS angolare.
@Injectable()
export class classname {
}
Step 2 - Successivamente, nel modulo appComponent o nel modulo in cui desideri utilizzare il servizio, devi definirlo come provider nel decoratore @Component.
@Component ({
providers : [classname]
})
Diamo un'occhiata a un esempio su come ottenere questo risultato. Di seguito sono riportati i passaggi coinvolti.
Step 1 - Crea un file ts file per il servizio denominato app.service.ts.
Step 2 - Inserisci il seguente codice nel file creato sopra.
import {
Injectable
} from '@angular/core';
@Injectable()
export class appService {
getApp(): string {
return "Hello world";
}
}
I seguenti punti devono essere annotati riguardo al programma di cui sopra.
Il decoratore iniettabile viene importato dal modulo angolare / centrale.
Stiamo creando una classe chiamata appService decorata con il decoratore iniettabile.
Stiamo creando una semplice funzione chiamata getApp, che restituisce una semplice stringa chiamata "Hello world".
Step 3 - Nel file app.component.ts, inserisci il seguente codice.
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();
}
}
I seguenti punti devono essere annotati riguardo al programma di cui sopra.
Innanzitutto, importiamo il nostro modulo appService nel modulo appComponent.
Quindi, registriamo il servizio come provider in questo modulo.
Nel costruttore definiamo una variabile chiamata _appService del tipo appService in modo che possa essere chiamata ovunque nel modulo appComponent.
Ad esempio, nel lifecyclehook ngOnInit, abbiamo chiamato la funzione getApp del servizio e abbiamo assegnato l'output alla proprietà value della classe AppComponent.
Dopo aver salvato tutte le modifiche al codice e aggiornato il browser, otterrai il seguente output.