Один сервис для всех компонентов в 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();
	}
}

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

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