Один сервис для всех компонентов

Вполне возможно, что в нашем приложении будет несколько различных компонентов, которые используют сервисы. При этом компоненты могут использовать одни и те же сервисы. Например, в прошлых темах был создан сервис DataService, который управляет данными. Определим специальный компонент для работы с данными. Для этого возьмем проект из прошлой темы и добавим в папку src/app новый файл data.component.ts:

Определим в этом файле следующий код:

import { Component} from "@angular/core";
import { FormsModule } from "@angular/forms";
import {DataService} from "./data.service";
import {LogService} from "./log.service";
        
@Component({
    selector: "data-comp",
    imports: [FormsModule],
    providers: [DataService, LogService],
    template: `<div>
        <div><input [(ngModel)]="newItem" />
            <button (click)="addItem(newItem)">Добавить</button>
        </div>
        <ul>
        @for(item of items; track $index){
            <li>{{item}}</li>
        }
        </ul>
    </div>`
})
export class DataComponent{ 
      
    newItem : string = "";
    items: string[] = [];
    constructor(private dataService: DataService){}
      
    addItem(name: string){
          
        this.dataService.addData(name);
    }
    ngOnInit(){
        this.items = this.dataService.getData();
    }
}

DataComponent загружает и добавляет данные. Для работы с сервисами декоратор Component определяет секцию providers:

providers: [DataService, LogService]

Используем этот компонент DataComponent в главном компоненте приложения AppComponent:

import { Component} from "@angular/core";
import { DataComponent } from "./data.component";

@Component({
    selector: "my-app",
    imports: [DataComponent],
    template: `<data-comp></data-comp>
	           <data-comp></data-comp>`
})
export class AppComponent {}

Этот компонент через элемент data-comp вызывает компонент DataComponent. Причем вызывает два раза. То есть для обработки каждого элемента будет создаваться свой объект DataComponent.

Теперь запустим приложение и попробуем добавить новый элемент:

Как видно на скриншоте, при добавлении в одном компоненте новый элемент будет добавляться только для этого компонента. Потому что у нас два отдельных компонента, и для каждого из них будет создаваться свой набор сервисов DataService и LogService.

Такое поведение не всегда может быть предпочтительным. Возможно, потребуется, чтобы компоненты использовали один и тот же объект сервиса, вместо создания разных сервисов для каждого компонента. Для этого мы можем зарегистрировать все сервисы не во вложенном компоненте, а в родительском компоненте AppComponent:

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

@Component({
    selector: "my-app",
    imports: [DataComponent],
    providers: [DataService, LogService],
    template: `<data-comp></data-comp>
               <data-comp></data-comp>`
})
export class AppComponent{ }

В этом случае мы уже можем убрать регистрацию сервисов из компонента DataComponent:

import { Component} from "@angular/core";
import { FormsModule } from "@angular/forms";
        
@Component({
    selector: "data-comp",
    imports: [FormsModule],
    template: `<div>
        <div><input [(ngModel)]="newItem" />
            <button (click)="addItem(newItem)">Добавить</button>
        </div>
        <ul>
        @for(item of items; track $index){
            <li>{{item}}</li>
        }
        </ul>
    </div>`
})
export class DataComponent{ 
      
    newItem : string = "";
    items: string[] = [];
    constructor(private dataService: DataService){}
      
    addItem(name: string){
          
        this.dataService.addData(name);
    }
    ngOnInit(){
        this.items = this.dataService.getData();
    }
}

После этого оба объекта DataComponent будут использовать один и тот же сервис DataService. Поэтому добавление объекта в одном компоненте автоматически отразится и на другом: