การใช้งานบริการใน Angular

ในบทเรียนที่ผ่านมาเราได้สร้าง บริการ DataService ของเราเอง มาแล้ว มาดูกันตอนนี้ว่า เราจะนำเข้าไปยังคอมโพเนนต์ได้อย่างไร:

app/app.component.tsimport { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // ตรงนี้

ใน decorator @Component ใน property providers เราต้องระบุบริการของเรา:

app/app.component.ts@Component({
  .....
  providers: [ DataService ] // ตรงนี้
})

ตอนนี้เราจะใช้แนวทางพิเศษ ที่เรียกว่า การอิงอิงแบบอินเจกชัน (dependency injection) แก่นแท้ของมัน คือใน constructor ของคอมโพเนนต์เราสามารถส่งบริการของเรา เป็นพารามิเตอร์ได้และมันจะเข้าไปอยู่ใน property ส่วนตัวของคอมโพเนนต์ของเราโดยอัตโนมัติ ดูในโค้ด:

app/app.component.tsexport class AppComponent {
  constructor(private dataService: DataService) { // อินเจกชันของการอิงอิง
    console.log(this.dataService); // บริการอยู่ใน property ส่วนตัว
  }
}

การอินเจกชันสำหรับบริการของเราทำงานได้ เนื่องจากก่อนหน้านี้เราได้ใช้ decorator Injectable กับมัน

ตอนนี้มาใน constructor ของคลาส คอมโพเนนต์ รับข้อมูลจากบริการของเรา โดยการเรียก method ที่เกี่ยวข้อง:

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>