Palvelun käyttö Angularissa

Edellisessä oppitunnissa loimme oman palvelun DataService. Tuotaamme sen nyt komponenttiin:

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

@Component -dekoraattorin providers -ominaisuuteen on määritettävä palvelumme:

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

Nyt käytämme erikoista lähestymistapaa, jota kutsutaan riippuvuuden injektoinniksi (dependency injection). Sen ydin on, että komponentin konstruktorissa voimme välittää palvelumme parametrina, ja se päätyy automaattisesti komponenttimme yksityiseen ominaisuuteen. Katso koodista:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // injektoidaan riippuvuus
    console.log(this.dataService); // palvelu yksityisessä ominaisuudessa
  }
}

Riippuvuuden injektointi palveluumme toimii, koska käytimme sille aiemmin Injectable -dekoraattoria.

Saadaan nyt komponenttiluokan konstruktorissa data palvelustamme kutsumalla vastaavaa metodia:

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

Esitetään saatu data komponentin templatessa:

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