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

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

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

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

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

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

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

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

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

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

มาแสดงข้อมูลที่ได้รับในเทมเพลต ของคอมโพเนนต์:

<ol>
	<li *ngFor="elem of data">
		{{ elem }}
	</li>
</ol>

รับสินค้าจากบริการของคุณใน คอมโพเนนต์และแสดงมันในเทมเพลต ของคอมโพเนนต์

สร้าง method ในบริการของคุณสำหรับเพิ่ม สินค้าใหม่ ในคอมโพเนนต์สร้างปุ่ม เมื่อคลิกที่ปุ่มจะมีการเพิ่มสินค้าใหม่

สร้างฟอร์มที่มีสอง input และปุ่ม เมื่อกดปุ่มจะมีการเพิ่ม สินค้าใหม่