Uporaba storitve v Angular

V prejšnji lekciji smo ustvarili lastno storitev DataService. Zdaj jo uvozimo v komponento:

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

V dekoratorju @Component v lastnosti providers je treba navesti našo storitev:

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

Zdaj bomo uporabili poseben pristop, ki se imenuje vnašanje odvisnosti (dependency injection). Njegovo bistvo je v tem, da lahko v konstruktorju komponente našo storitev posredujemo kot parameter in ta bo samodejno prenesena v zasebno lastnost naše komponente. Glejte v kodi:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // vnašamo odvisnost
    console.log(this.dataService); // storitev v zasebni lastnosti
  }
}

Vnašanje za našo storitev deluje, ker smo prej nanjo uporabili dekorator Injectable.

Zdaj pa v konstruktorju razreda komponente pridobimo podatke iz naše storitve z klicem ustrezne metode:

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

Pridobljene podatke izpišimo v predlogi komponente:

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