Ծառայության օգտագործումը 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();
  }
}

Եկեք ստացված տվյալները արտածենք կոմպոնենտի տեմպլեյթում:

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