Использование сервиса в Angular

В предыдущем уроке мы создали свой собственный сервис DataService. Давайте теперь импортируем его в компонент:

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

В декораторе @Component в свойстве providers нужно указать наш сервис:

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

Теперь мы воспользуемся специальным подходом, который называется внедрение зависимости (dependency injection). Его суть заключается в том, что в конструкторе компонента мы можем передать наш сервис параметром и он автоматически попадет в приватное свойство нашего компонента. Смотрите в коде:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // внедряем зависимость
    console.log(this.dataService); // сервис в приватном свойстве
  }
}

Внедрение для нашего сервиса работает, так как мы ранее применили к нему декоратор Injectable.

Давайте теперь в конструкторе класса компонента получим данные из нашего сервиса, вызвав соответствующий метод:

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

Давайте выведем полученные данные в темплейте компонента:

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