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.