Выкарыстанне сервісу ў 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>