Teenuse kasutamine Angularis

Eelmises õppetükis loome oma teenuse DataService. Nüüd impordime selle komponenti:

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

Dekoraatoris @Component omaduses providers tuleb määrata meie teenus:

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

Nüüd kasutame spetsiaalset lähenemist, mida nimetatakse sõltuvuse süstimiseks (dependency injection). Selle olemus seisneb selles, et komponendi konstruktoris saame oma teenuse edastada parameetrina ja see automaatselt satub meie komponendi privaatseks omaduseks. Vaadake koodis:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // süstime sõltuvuse
    console.log(this.dataService); // teenus privaatses omaduses
  }
}

Sõltuvuse süstimine meie teenuse jaoks töötab, kuna me varem rakendasime sellele dekoraatorit Injectable.

Nüüd komponendi klassi konstruktoris hankime andmed meie teenusest, käivitades vastava meetodi:

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

Väljastame saadud andmed komponendi mallis:

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