Внедрение сервиса в другой сервис

Вполне вероятна ситуация, когда мы захотим использовать один сервис в другом сервисе. Например, в прошлой теме был создан сервис для работы с данными. Что если нам необходимо логгировать все операции с данными. Для логгирования определим новый сервис. Для этого добавим в папку src/app новый файл log.service.ts со следующим содержимым:

export class LogService{

	write(logMessage:string){
		
		console.log(logMessage);
	}
}

Для логгирования в сервисе определен метод write, который выводит некоторое сообщение на консоль.

Теперь используем этот сервис. Для этого изменим код в файле data.service.ts:

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

@Injectable()
export class DataService{
 
    private data: string[] = [ "Tom", "Bob",  "Sam"];
    constructor(private logService: LogService){}
     
    getData(): string[] {
         
        this.logService.write("операция получения данных");
        return this.data;
    }
    addData(name: string){
         
        this.data.push(name);
        this.logService.write("операция добавления данных");
    }
}

Чтобы указать, что сервис может использовать другие сервисы, к классу сервиса применяется декоратор Injectable. Данный декоратор гарантирует, что встроенный механизм внедрения зависимостей сможет создать объект этого класса и передать в него в качестве зависимости другой объект (другой сервис или компонент).

Существует общая рекомендации от разработчиков Angular применять Injectable к любому классу сервиса, хотя в прошлой теме мы могли использовать сервис в компоненте без применения к сервису декоратора Injectable. Однако в практическом плане данный декоратор необходим, если внедряемый сервис сам имеет некоторые зависимости, как в примере с сервисом DataService выше.

И также в случае с DataService сервис LogService также надо зарегистрировать в списке провайдеров AppComponent:

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

@Component({
    selector: "my-app",
    standalone: true,
    imports: [FormsModule],
    providers: [DataService, LogService],
    template: `<div>
        <div><input [(ngModel)]="name" />
            <button (click)="addItem(name)">Добавить</button>
        </div>
        <ul>
        @for(item of items; track $index){
            <li>{{item}}</li>
        }
        </ul>
    </div>`
})
export class AppComponent{ 
      
    items: string[] = [];
    name: string = "";
    constructor(private dataService: DataService){}
      
    addItem(name: string){
          
        this.dataService.addData(name);
    }
    ngOnInit(){
        this.items = this.dataService.getData();
    }
}

И несмотря на то, что напрямую LogService не используется в компоненте AppComponent, но он используется в DataService, который вызывается в AppComponent.

И при выполнении операций с данными в консоли браузера мы сможем увидеть работу сервиса LogService.