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

Вполне возможно, что в нашем приложении будет несколько различных компонентов, которые используют сервисы. При этом компоненты могут использовать одни и те же сервисы. Например, в прошлых темах был создан сервис DataService, который управляет данными. Определим специальный компонент для работы с данными. Для этого возьмем проект из прошлой темы и добавим в папку %%src/app%% новый файл **data.component.ts:**\\
\\
{{:angular:angular2:services:4.6.png|}}
\\
Определим в этом файле следующий код:
<code javascript>
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();
    }
}
</code>
DataComponent загружает и добавляет данные. Для работы с сервисами декоратор Component определяет секцию providers:
<code javascript>
providers: [DataService, LogService]
</code>
Используем этот компонент DataComponent в главном компоненте приложения AppComponent:
<code javascript>
import { Component} from '@angular/core';
       
@Component({
    selector: 'my-app',
    template: `<data-comp></data-comp>
               <data-comp></data-comp>`
})
export class AppComponent {}
</code>
Этот компонент через элемент ''data-comp'' вызывает компонент DataComponent. Причем вызывает два раза. То есть для обработки каждого элемента будет создаваться свой объект DataComponent.\\
\\
И соответственно изменим главный модуль приложения AppModule:
<code javascript>
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 { }
</code>
Теперь запустим приложение и попробуем добавить новый элемент:\\
\\
{{ :angular:angular2:services:4.3.png |}}
\\
Как видно на скриншоте, при добавлении в одном компоненте новый элемент будет добавляться только для этого компонента. Потому что у нас два отдельных компонента, и для каждого из них будет создаваться свой набор сервисов DataService и LogService.\\
\\
Такое поведение не всегда может быть предпочтительным. Возможно, потребуется, чтобы компоненты использовали один и тот же объект сервиса, вместо создания разных сервисов для каждого компонента. Для этого мы можем зарегистрировать все сервисы не в компоненте, а в главном модуле приложения AppModule:\\
\\
<code javascript>
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 { }
</code>
В этом случае мы уже можем убрать регистрацию сервисов из компонента DataComponent:

<code javascript>
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();
    }
}
</code>
После этого оба объекта DataComponent будут использовать один и тот же сервис DataService. Поэтому добавление объекта в одном компоненте автоматически отразится и на другом:\\
\\
{{ :angular:angular2:services:4.4.png |}}