Angular 2 - Usługi
Usługa jest używana, gdy konieczne jest dostarczenie wspólnej funkcjonalności do różnych modułów. Na przykład moglibyśmy mieć funkcjonalność bazy danych, którą można by ponownie wykorzystać w różnych modułach. W ten sposób możesz stworzyć usługę, która mogłaby mieć funkcjonalność bazy danych.
Podczas tworzenia usługi należy wykonać następujące kluczowe kroki.
Step 1- Utwórz osobną klasę z dekoratorem do wstrzykiwania. Dekorator do wstrzykiwania umożliwia wstrzykiwanie funkcjonalności tej klasy i używanie ich w dowolnym module Angular JS.
@Injectable()
export class classname {
}
Step 2 - Następnie w swoim module appComponent lub module, w którym chcesz korzystać z usługi, musisz zdefiniować go jako dostawcę w dekoratorze @Component.
@Component ({
providers : [classname]
})
Spójrzmy na przykład, jak to osiągnąć. Poniżej przedstawiono wymagane kroki.
Step 1 - Utwórz plik ts plik dla usługi o nazwie app.service.ts.
Step 2 - Umieść poniższy kod w utworzonym powyżej pliku.
import {
Injectable
} from '@angular/core';
@Injectable()
export class appService {
getApp(): string {
return "Hello world";
}
}
Na temat powyższego programu należy zwrócić uwagę na następujące kwestie.
Dekorator iniekcyjny jest importowany z modułu kątowego / rdzenia.
Tworzymy klasę o nazwie appService, która jest ozdobiona dekoratorem Injectable.
Tworzymy prostą funkcję o nazwie getApp, która zwraca prosty ciąg znaków o nazwie „Hello world”.
Step 3 - W pliku app.component.ts umieść następujący kod.
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();
}
}
Na temat powyższego programu należy zwrócić uwagę na następujące kwestie.
Najpierw importujemy nasz moduł appService do modułu appComponent.
Następnie rejestrujemy usługę jako dostawca w tym module.
W konstruktorze definiujemy zmienną o nazwie _appService typu appService, dzięki czemu można ją wywołać w dowolnym miejscu modułu appComponent.
Na przykład w lifecyclehook ngOnInit wywołaliśmy funkcję getApp usługi i przypisaliśmy dane wyjściowe do właściwości value klasy AppComponent.
Po zapisaniu wszystkich zmian w kodzie i odświeżeniu przeglądarki, otrzymasz następujące dane wyjściowe.