Szolgáltatás használata Angularban

Az előző leckében létrehoztuk a saját szolgáltatásunkat DataService. Most pedig importáljuk be a komponensbe:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // itt

A @Component dekorátor providers tulajdonságában meg kell adnunk a szolgáltatásunkat:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // itt
})

Most egy speciális megközelítést fogunk alkalmazni, amelyet függőséginjektálásnak (dependency injection) hívnak. Ennek a lényege az, hogy a komponens konstruktorában átadhatjuk szolgáltatásunkat paraméterként, és az automatikusan a komponensünk privát tulajdonságába kerül. Nézd meg a kódban:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // függőség injektálása
    console.log(this.dataService); // szolgáltatás a privát tulajdonságban
  }
}

A függőséginjektálás a szolgáltatásunknál működik, mivel korábban alkalmaztuk rá a Injectable dekorátort.

Most pedig a komponens osztály konstruktorában szerezzük be az adatokat a szolgáltatásunktól a megfelelő metódus meghívásával:

app/app.component.tsexport class AppComponent {
  public data: string[] = [];
  
  constructor(private dataService: DataService) {
    this.data = this.dataService.getData();
  }
}

Most jelenítsük meg a kapott adatokat a komponens template-jében:

app/app.component.html<ol>
  <li *ngFor="elem of data">
    {{ elem }}
  </li>
</ol>