Користење на сервис во 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>