Chèn một dịch vụ vào một dịch vụ khác trong Angular

Để làm việc với dự án, chúng ta có thể cần chèn một dịch vụ vào một dịch vụ khác để mở rộng chức năng của chúng. Hãy tạo thêm một dịch vụ nữa, dịch vụ này sẽ in thông báo ra console khi thêm dữ liệu mới.

Đầu tiên, trong thư mục test/src/app tạo tệp log.service.ts. Xuất ra lớp LogService, trong đó chúng ta sẽ viết hàm write để in thông báo ra console:

import { Injectable } from '@angular/core';

@Injectable()
export class LogService {
	write(message: string) {
		console.log(message);
	}
}

Tiếp theo, chuyển đến dịch vụ DataService của chúng ta và import, inject và sử dụng dịch vụ mới của chúng ta:

import { Injectable } from '@angular/core';
import { LogService } from './log.service'; // import

@Injectable()
export class DataService {
	private data: string[] = ['a', 'b', 'c'];

	constructor(private logService: LogService) { // inject

	}

	getData(): string[] {
		this.logService.write('dữ liệu đã nhận'); // sử dụng
		return this.data;
	}

	addData(name: string){
		this.data.push(name);
		this.logService.write('phần tử mới đã được thêm'); // sử dụng
	}
}

Tuy nhiên, điều này là chưa đủ. Cần phải khai báo dịch vụ mới cả trong lớp component, mặc dù nó không được sử dụng trực tiếp ở đó:

import { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // import

@Component({
	........
	providers: [DataService, LogService] // thêm vào
})