Używanie serwisu w Angular

W poprzedniej lekcji stworzyliśmy nasz własny serwis DataService. Teraz zaimportujmy go do komponentu:

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

W dekoratorze @Component we właściwości providers należy wskazać nasz serwis:

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

Teraz skorzystamy ze specjalnego podejścia, które nazywa się wstrzykiwanie zależności (dependency injection). Jego istota polega na tym, że w konstruktorze komponentu możemy przekazać nasz serwis jako parametr i automatycznie trafi on do prywatnej właściwości naszego komponentu. Spójrzcie w kodzie:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // wstrzykujemy zależność
    console.log(this.dataService); // serwis w prywatnej właściwości
  }
}

Wstrzykiwanie dla naszego serwisu działa, ponieważ wcześniej zastosowaliśmy do niego dekorator Injectable.

Teraz w konstruktorze klasy komponentu pobierzmy dane z naszego serwisu, wywołując odpowiednią metodę:

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

Wyświetlmy pobrane dane w templacie komponentu:

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