Sử dụng Service trong Angular

Ở bài học trước, chúng ta đã tạo service DataService của riêng mình. Bây giờ hãy import nó vào component:

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { DataService } from './data.service'; // ở đây

Trong decorator @Component, ở thuộc tính providers cần chỉ định service của chúng ta:

@Component({
	.....
	providers: [ DataService ] // ở đây
})

Bây giờ chúng ta sẽ sử dụng một phương pháp đặc biệt, được gọi là dependency injection (dependency injection). Bản chất của nó là trong constructor của component, chúng ta có thể truyền service của mình vào như một tham số và nó sẽ tự động trở thành thuộc tính private của component. Xem trong code:

export class AppComponent {
	constructor(private dataService: DataService) { // inject dependency
		console.log(this.dataService); // service trong thuộc tính private
	}
}

Dependency injection cho service của chúng ta hoạt động vì trước đó chúng ta đã áp dụng decorator Injectable cho nó.

Bây giờ hãy lấy dữ liệu từ service của chúng ta trong constructor của class component, bằng cách gọi phương thức tương ứng:

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

Hãy hiển thị dữ liệu nhận được trong template của component:

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

Lấy các sản phẩm từ service của bạn trong component và hiển thị chúng trong template của component.

Tạo một phương thức trong service của bạn để thêm sản phẩm mới. Trong component, tạo một nút bấm, khi nhấp vào sẽ thêm một sản phẩm mới.

Tạo một form với hai input và một nút bấm, khi nhấn vào sẽ thêm một sản phẩm mới.