Brug af en service i Angular

I den forrige lektion oprettede vi vores egen service DataService. Lad os nu importere den til komponenten:

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

I dekoratøren @Component i egenskaben providers skal vi angive vores service:

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

Nu vil vi bruge en speciel tilgang, der kaldes afhængighedsinjektion (dependency injection). Dens essens består i, at vi i komponentens konstruktor kan give vores service som en parameter, og den vil automatisk blive tilgængelig som en privat egenskab i vores komponent. Se i koden:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // injicerer afhængighed
    console.log(this.dataService); // service i privat egenskab
  }
}

Injektion for vores service fungerer, fordi vi tidligere har anvendt dekoratøren Injectable på den.

Lad os nu i komponentklassens konstruktor hente data fra vores service ved at kalde den tilsvarende metode:

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

Lad os vise de modtagne data i komponentens template:

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