Внедрение одного сервиса в другой в Angular
Для работы над проектом нам может понадобиться внедрить один сервис в другой, чтобы расширить их функциональность. Давайте сделаем еще один сервис, который будет выводить сообщения в консоль при добавлении новых данных.
Вначале в папке test/src/app
создаем файл log.service.ts
.
Экспортируем класс LogService
, в котором пропишем функцию
write
для вывода сообщения в консоль:
import { Injectable } from '@angular/core';
@Injectable()
export class LogService {
write(message: string) {
console.log(message);
}
}
Далее переходим в наш сервис DataService
и импортируем, инжектируем и используем
наш новый сервис:
import { Injectable } from '@angular/core';
import { LogService } from './log.service'; // импортируем
@Injectable()
export class DataService {
private data: string[] = ['a', 'b', 'c'];
constructor(private logService: LogService) { // инжектируем
}
getData(): string[] {
this.logService.write('data received'); // используем
return this.data;
}
addData(name: string){
this.data.push(name);
this.logService.write('new elem added'); // используем
}
}
Этого, однако, мало. Нужно еще прописать новый сервис и в классе компонента, хотя он там напрямую и не используется:
import { Component } from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service'; // импортируем
@Component({
........
providers: [DataService, LogService] // добавляем
})