Användning av en tjänst i Angular

I föregående lektion skapade vi vår egen tjänst DataService. Låt oss nu importera den till komponenten:

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

I dekoratören @Component i egenskapen providers måste vi ange vår tjänst:

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

Nu kommer vi att använda ett speciellt tillvägagångssätt, som kallas dependency injection (dependency injection). Kärnan i det är att vi i komponentens konstruktor kan skicka vår tjänst som en parameter och den kommer automatiskt hamna i komponentens privata egenskap. Se i koden:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // injicerar beroendet
    console.log(this.dataService); // tjänsten i den privata egenskapen
  }
}

Injektion för vår tjänst fungerar eftersom vi tidigare applicerade dekoratören Injectable på den.

Låt oss nu i klassens konstruktor hämta data från vår tjänst, genom att anropa motsvarande metod:

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

Låt oss visa den hämtade datan i komponentens template:

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