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

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

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

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { LogService } from './log.service';
import { Phone } from './phone';

@Component({
    selector: 'data-comp',
    template: `
        <div class="panel">
            <div class="form-inline">
                <div class="form-group">
                    <input
                        class="form-control"
                        [(ngModel)]="name"
                        placeholder="Модель"
                    />
                    <input
                        type="number"
                        class="form-control"
                        [(ngModel)]="price"
                        placeholder="Цена"
                    />
                    <button
                        class="btn btn-default"
                        (click)="addItem(name, price)"
                    >
                        Добавить
                    </button>
                </div>
            </div>
            <table class="table table-striped">
                <tr *ngFor="let item of items">
                    <td>{{ item.name }}</td>
                </tr>
            </table>
        </div>
    `,
})
export class DataComponent implements OnInit {
    items: Phone[] = [];
    constructor(private dataService: DataService) {}

    addItem(name: string, price: number) {
        this.dataService.addData(name, price);
    }
    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, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { LogService } from './log.service';
import { Phone } from './phone';

@Component({
    selector: 'data-comp',
    template: `
        <div class="panel">
            <div class="form-inline">
                <div class="form-group">
                    <input
                        class="form-control"
                        [(ngModel)]="name"
                        placeholder="Модель"
                    />
                    <input
                        type="number"
                        class="form-control"
                        [(ngModel)]="price"
                        placeholder="Цена"
                    />
                    <button
                        class="btn btn-default"
                        (click)="addItem(name, price)"
                    >
                        Добавить
                    </button>
                </div>
            </div>
            <table class="table table-striped">
                <tr *ngFor="let item of items">
                    <td>{{ item.name }}</td>
                </tr>
            </table>
        </div>
    `,
})
export class DataComponent implements OnInit {
    items: Phone[] = [];
    constructor(private dataService: DataService) {}

    addItem(name: string, price: number) {
        this.dataService.addData(name, price);
    }
    ngOnInit() {
        this.items = this.dataService.getData();
    }
}

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

Комментарии