Истифодаи хизматрасонӣ дар 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();
  }
}

Биёед маълумоти гирифташударо дар template-и компонент чоп кунем:

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