Menyuntik Satu Perkhidmatan ke dalam Perkhidmatan Lain dalam Angular

Untuk bekerja pada projek, kita mungkin memerlukan untuk menyuntik satu perkhidmatan ke dalam perkhidmatan lain untuk mengembangkan fungsi mereka. Mari buat satu lagi perkhidmatan yang akan mencetak mesej ke konsol apabila data baru ditambah.

Mula-mula, dalam folder test/src/app buat fail log.service.ts. Eksport kelas LogService, di mana kita akan menulis fungsi write untuk mencetak mesej ke konsol:

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

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

Seterusnya, pergi ke perkhidmatan kita DataService dan import, inject dan gunakan perkhidmatan baru kita:

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('data received'); // gunakan
		return this.data;
	}
	
	addData(name: string){
		this.data.push(name);
		this.logService.write('new elem added'); // gunakan
	}
}

Walau bagaimanapun, ini masih tidak mencukupi. Kita juga perlu menyatakan perkhidmatan baru dalam kelas komponen, walaupun ia tidak digunakan secara langsung di sana:

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

@Component({
	........
	providers: [DataService, LogService] // tambah
})