Utilizarea serviciului în Angular

În lecția precedentă am creat propriul nostru serviciu DataService. Să îl importăm acum în componentă:

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

În decoratorul @Component în proprietatea providers trebuie să indicăm serviciul nostru:

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

Acum vom folosi o abordare specială, care se numește injectarea dependenței (dependency injection). Esența sa constă în faptul că în constructorul componentului putem transmite serviciul nostru ca parametru și acesta va ajunge automat în proprietatea privată a componentului nostru. Uitați-vă în cod:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // injectăm dependența
    console.log(this.dataService); // serviciul în proprietatea privată
  }
}

Injectarea pentru serviciul nostru funcționează, deoarece am aplicat anterior acestuia decoratorul Injectable.

Să obținem acum în constructorul clasei componentului date din serviciul nostru, apelând metoda corespunzătoare:

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

Să afișăm datele obținute în șablonul componentului:

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