Servisa izmantošana Angular

Iepriekšējā nodarbībā mēs izveidojām savu servisu DataService. Tagad importēsim to komponentā:

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

Decorator @Component property providers jānorāda mūsu serviss:

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

Tagad mēs izmantosim īpašu pieeju, ko sauc par atkarību ieviešanu (dependency injection). Tā būtība ir tāda, ka komponenta konstruktorā mēs varam nodot mūsu servisu kā parametru, un tas automātiski nonāks mūsu komponenta privātajā property. Skatieties kodā:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // ieviešam atkarību
    console.log(this.dataService); // serviss privātajā property
  }
}

Atkarību ieviešana mūsu servisam darbojas, jo mēs iepriekš tam bijam piemērojuši decorator Injectable.

Tagad komponenta klases konstruktorā iegūstam datus no mūsu servisa, izsaucot atbilstošo metodi:

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

Iegūtos datus izvadīsim komponenta templatā:

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