Utilizando um Serviço no Angular

Na lição anterior, criamos nosso próprio serviço DataService. Vamos agora importá-lo para o componente:

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

No decorador @Component, na propriedade providers, precisamos especificar nosso serviço:

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

Agora, vamos utilizar uma abordagem especial, chamada injeção de dependência (dependency injection). Sua essência consiste no fato de que no construtor do componente podemos passar nosso serviço como um parâmetro, e ele automaticamente será atribuído a uma propriedade privada do nosso componente. Veja no código:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // injetando a dependência
    console.log(this.dataService); // serviço na propriedade privada
  }
}

A injeção para o nosso serviço funciona porque aplicamos anteriormente o decorador Injectable a ele.

Vamos agora obter os dados do nosso serviço no construtor da classe do componente, chamando o método correspondente:

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

Vamos exibir os dados obtidos no template do componente:

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