Servisdən istifadə Angular-da

Əvvəlki dərsdə biz öz xüsusi servisimizi DataService yaratdıq. Gəlin indi onu komponentə import edək:

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

@Component dekoratorunda providers xassəsində bizim servisimizi göstərmək lazımdır:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // burada
})

İndi biz xüsusi bir yanaşmadan istifadə edəcəyik, buna asılılıq əlavə etmə (dependency injection) deyilir. Onun mahiyyəti ondan ibarətdir ki, komponentin konstruktorunda biz servisimizi parametr kimi ötürə bilərik və o avtomatik olaraq komponentimizin gizli xassəsinə daxil olacaq. Koda baxın:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // asılılığı əlavə edirik
    console.log(this.dataService); // servis gizli xassədə
  }
}

Bizim servisimiz üçün asılılığın əlavə edilməsi işləyir, çünki biz əvvəllər ona Injectable dekoratorunu tətbiq etmişik.

Gəlin indi komponent sinfinin konstruktorunda servisimizdən məlumatları əldə edək, uyğun metodu çağıraraq:

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

Gəlin əldə edilmiş məlumatları komponentin şablonunda çıxaraq:

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