Použití služby v Angular

V předchozí lekci jsme vytvořili vlastní službu DataService. Nyní ji importujme do komponenty:

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

V dekorátoru @Component ve vlastnosti providers je třeba uvést naši službu:

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

Nyní využijme speciální přístup, který se nazývá dependency injection (dependency injection). Jeho podstata spočívá v tom, že v konstruktoru komponenty můžeme předat naši službu parametrem a ta automaticky přejde do soukromé vlastnosti naší komponenty. Podívejte se v kódu:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // injectujeme závislost
    console.log(this.dataService); // služba v soukromé vlastnosti
  }
}

Dependency injection pro naši službu funguje, protože jsme na ni dříve aplikovali dekorátor Injectable.

Nyní v konstruktoru třídy komponenty získejme data z naší služby voláním příslušné metody:

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

Vypišme získaná data v templatu komponenty:

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