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

https://metanit.com/web/angular2/4.3.php это важно, чтобы один объект сервиса создавался

Давайте рассмотрим случай, когда сервис используется сразу несколькими компонентами. Вначале создадим новый компонент `app/data/data.component.ts` и все необходимые для него шаблоны. Для вывода и ввода данных аналогично как в предыдущем уроке, пропишем в нем следующий код:

`import { Component} from '@angular/core'; import {DataService} from './../data.service'; import {LogService} from './../log.service'; @Component({ selector: 'data-tag', templateUrl: './data.component.html', styleUrls: ['./data.component.css'], providers: [DataService, LogService] }) export class DataComponent { newEl: string = ''; arr: string[] = []; constructor(private dataService: DataService) {} addEl(name: string) { this.dataService.addData(name); } ngOnInit() { this.arr = this.dataService.getData(); } }`

Переходим к HTML-шаблону и задаем ему следующую разметку:

`<div> <div><input [(ngModel)]="newEl" placeholder = "Enter product name" /> <button (click)="addEl(newEl)">Add</button> </div> <ol> <li *ngFor="let el of arr"> {{ el }} </li> </ol> </div>`

Теперь нужно прописать код и в HTML-шаблоне главного компонента. Поставим в нем только специальные теги для отображения содержимого класса `DataComponent`:

`<data-tag></data-tag> <data-tag></data-tag>`

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

Теперь заходим в наш главный модуль и импортируем в него `DataComponent`:

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

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

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

При этом в файле `data.component.ts` мы убираем регистрацию наших сервисов, т.е. удаляем из свойства `providers`:

`import { Component } from '@angular/core'; import { DataService } from './../data.service'; @Component({ selector: 'data-tag', templateUrl: './data.component.html', styleUrls: ['./data.component.css'], providers: [] }) export class DataComponent { newEl : string = ''; arr: string[] = []; constructor(private dataService: DataService) {} addEl(name: string) { this.dataService.addData(name); } ngOnInit() { this.arr = this.dataService.getData(); } }`

Теперь у нас есть два инпута, при вводе продукта в один из них, он отобразится в списке под вторым инпутом.

Повторите пример, описанный в уроке.

↑