Uso de servicios en Angular

En la lección anterior creamos nuestro propio servicio DataService. Ahora vamos a importarlo en el componente:

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

En el decorador @Component en la propiedad providers debemos especificar nuestro servicio:

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

Ahora utilizaremos un enfoque especial, llamado inyección de dependencias (dependency injection). Su esencia consiste en que en el constructor del componente podemos pasar nuestro servicio como parámetro y automáticamente estará disponible como una propiedad privada de nuestro componente. Observen en el código:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // inyectamos la dependencia
    console.log(this.dataService); // servicio en propiedad privada
  }
}

La inyección para nuestro servicio funciona, ya que anteriormente aplicamos a él el decorador Injectable.

Ahora obtengamos los datos de nuestro servicio en el constructor de la clase del componente, llamando al método correspondiente:

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

Mostremos los datos obtenidos en la plantilla del componente:

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