Paslaugos naudojimas Angular

Ankstesnėje pamokoje mes sukūrėme savo paslaugą DataService. Dabar importuokime ją į komponentą:

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

Decoratoriuje @Component savyje providers reikia nurodyti mūsų paslaugą:

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

Dabar mes panaudosime specialų požiūrį, kuris vadinamas priklausomybių injekavimas (dependency injection). Jo esmė yra ta, kad komponento konstruktoriuje mes galime perduoti mūsų paslaugą kaip parametrą ir ji automatiškai pateks į privatų mūsų komponento savybę. Žiūrėkite kode:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // įleidžiame priklausomybę
    console.log(this.dataService); // paslauga privacioje savybėje
  }
}

Injekavimas mūsų paslaugai veikia, todėl kad mes anksčiau jai pritaikėme decoratorių Injectable.

Dabar komponento klasės konstruktoriuje gaukime duomenis iš mūsų paslaugos, iškviesdami atitinkamą metodą:

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

Atvaizduokime gautus duomenis komponento šablone:

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