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


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

import { Component} from '@angular/core';
import {DataService} from './data.service';
import {LogService} from './log.service';
 
@Component({
    selector: 'data-comp',
    template: `<div>
        <div>
                <input [(ngModel)]="newItem" placeholder = "Модель" />
                <button (click)="addItem(newItem)">Добавить</button>
        </div>
        <table>
            <tr *ngFor="let item of items">
                <td>{{item}}</td>
            </tr>
        </table>
    </div>`,
    providers: [DataService, LogService]
})
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';
 
@Component({
    selector: 'my-app',
    template: `<data-comp></data-comp>
               <data-comp></data-comp>`
})
export class AppComponent {}

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

И соответственно изменим главный модуль приложения AppModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }   from './app.component';
import { DataComponent }   from './data.component';
 
@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, DataComponent],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

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


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

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

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { AppComponent }   from './app.component';
import { DataComponent }   from './data.component';
import {DataService} from './data.service';
import {LogService} from './log.service';
@NgModule({
    imports:      [ BrowserModule, FormsModule ],
    declarations: [ AppComponent, DataComponent],
    providers: [DataService, LogService], // регистрация сервисов
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

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

import { Component} from '@angular/core';
import {DataService} from './data.service';
 
@Component({
    selector: 'data-comp',
    template: `<div>
        <div>
                <input [(ngModel)]="newItem" placeholder = "Модель" />
                <button (click)="addItem(newItem)">Добавить</button>
        </div>
        <table>
            <tr *ngFor="let item of items">
                <td>{{item}}</td>
            </tr>
        </table>
    </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. Поэтому добавление объекта в одном компоненте автоматически отразится и на другом: