Използване на услуга в 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>