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) деб аталувчи maxсус ёндашувдан фойдаланамиз. Унинг мақсади шундан иборатки, компонентнинг конструкторида биз сервисимизни параметр сифатида ўтказа оламиз ва у автоматик тарзда бизнинг компонентимизнинг хусусий хусусиятига айланади. Кодда ку́ринг:

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>