Gebruik van 'n diens in Angular

In die vorige les het ons ons eie diens DataService geskep. Kom ons voer dit nou in die komponent in:

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

In die dekorateur @Component moet ons ons diens in die eienskap providers spesifiseer:

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

Nou sal ons 'n spesiale benadering gebruik, genoem afhanklikheidsinplasing (dependency injection). Die kern daarvan is dat ons in die konstruktor van die komponent ons diens as 'n parameter kan deurgee en dit sal outomaties in die private eienskap van ons komponent beland. Kyk in die kode:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // plaas afhanklikheid in
    console.log(this.dataService); // diens in private eienskap
  }
}

Inplasing vir ons diens werk, aangesien ons vroeër die dekorateur Injectable daarop toegepas het.

Kom ons kry nou data van ons diens in die konstruktor van die komponentklas deur die ooreenstemmende metode te roep:

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

Kom ons vertoon die verkryde data in die templaat van die komponent:

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