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>