Penggunaan Perkhidmatan dalam Angular

Dalam pelajaran sebelumnya, kita telah mencipta perkhidmatan DataService kita sendiri. Sekarang mari importnya ke dalam komponen:

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

Dalam dekorator @Component, dalam sifat providers, kita perlu nyatakan perkhidmatan kita:

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

Sekarang kita akan menggunakan pendekatan khas, yang dipanggil suntikan kebergantungan (dependency injection). Intipatinya terletak pada fakta bahawa dalam pembina komponen kita boleh menghantar perkhidmatan kita sebagai parameter dan ia akan secara automatik masuk ke dalam sifat peribadi komponen kita. Lihat dalam kod:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // menyuntik kebergantungan
    console.log(this.dataService); // perkhidmatan dalam sifat peribadi
  }
}

Suntikan untuk perkhidmatan kita berfungsi, kerana kita sebelum ini telah menggunakan dekorator Injectable padanya.

Sekarang mari dalam pembina kelas komponen dapatkan data dari perkhidmatan kita, dengan memanggil kaedah yang berkenaan:

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

Mari kita paparkan data yang diperoleh dalam templat komponen:

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