Χρήση υπηρεσίας στο Angular

Στο προηγούμενο μάθημα δημιουργήσαμε τη δική μας υπηρεσία DataService. Ας την εισαγάγουμε τώρα στο component:

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

Στον decorator @Component στην ιδιότητα providers πρέπει να ορίσουμε την υπηρεσία μας:

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

Τώρα θα χρησιμοποιήσουμε μια ειδική προσέγγιση, που ονομάζεται εξάρτηση εισαγωγής (dependency injection). Η ουσία της συνίσταται στο γεγονός ότι στον constructor του component μπορούμε να περάσουμε την υπηρεσία μας ως παράμετρο και αυτόματα θα μεταφερθεί σε ιδιωτική ιδιότητα του component μας. Δείτε στον κώδικα:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // εισάγουμε την εξάρτηση
    console.log(this.dataService); // η υπηρεσία σε ιδιωτική ιδιότητα
  }
}

Η εισαγωγή για την υπηρεσία μας λειτουργεί, καθώς προηγουμένως εφαρμόσαμε σε αυτήν τον decorator Injectable.

Ας λάβουμε τώρα στον constructor της κλάσης του component δεδομένα από την υπηρεσία μας, καλώντας την αντίστοιχη μέθοδο:

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

Ας εμφανίσουμε τα δεδομένα που ελήφθησαν στο template του component:

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