Angular-da servisden peýdalanmak

Öňki sapakda özümiziň DataService servisimizi döretdik. Indi ony komponente import edeliň:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // şu ýerde

@Component dekoratorynda providers aýratynlygynda biziň servisimizi görkezmeli:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // şu ýerde
})

Indi biz aýratyn ýagdaýy ulanarys, baglylygy girizmek (dependency injection) diýilýär. Onuň möhümi şonda, komponentiň konstruktorynda biz servisimizi parametr hökmünde geçirip bileris we ol awtomatik usulda komponentimiziň hususy aýratynlygynda bolar. Koda serediň:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // baglylygy girizýäris
    console.log(this.dataService); // servis hususy aýratynlykda
  }
}

Biziň servisimiz üçin girizmek işleýär, sebäbi biz öň onuň üçin Injectable dekoratoryny ulandy.

Indi komponentiň klasynyň konstruktorynda biziň servisimizden maglumat alyň, degisli usuly çagyryp:

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

Alynan maglumatlary komponentiň şablonunda görkezeliň:

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