Angular-da servicedan foydalanish

Oldingi darsda biz o'zimizning DataService servisimizni yaratdik. Keling endi uni komponentga import qilaylik:

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

@Component dekoratoridagi providers xususiyatiga bizning servisimizni ko'rsatish kerak:

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

Endi biz bog'liqlik injektsiyasi (dependency injection) deb ataladigan maxsus yondashuvdan foydalanamiz. Uning mazmuni shundaki, komponent konstruktorida biz servisimizni parametr sifatida uzatishimiz mumkin va u avtomatik ravishda komponentimizning xususiy xususiyatiga aylanadi. Kodda ko'ring:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // bog'liqlikni injektsiya qilamiz
    console.log(this.dataService); // servis xususiy xususiyatda
  }
}

Bizning servisimiz uchun injektsiya ishlaydi, chunki biz oldin unga Injectable dekoratorini qo'llagan edik.

Keling endi komponent klassining konstruktorida servisimizdan ma'lumotlarni olamiz, kerakli metodni chaqirib:

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

Keling olingan ma'lumotlarni komponentning shablonida chiqaramiz:

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