Вполне возможно, что в нашем приложении будет несколько различных компонентов, которые используют сервисы. При этом компоненты могут использовать одни и те же сервисы. Например, в прошлых темах был создан сервис DataService, который управляет данными. Определим специальный компонент для работы с данными. Для этого возьмем проект из прошлой темы и добавим в папку src/app новый файл data.component.ts:
Определим в этом файле следующий код:
import { Component} from "@angular/core"; import { FormsModule } from "@angular/forms"; import {DataService} from "./data.service"; import {LogService} from "./log.service"; @Component({ selector: "data-comp", standalone: true, imports: [FormsModule], providers: [DataService, LogService], template: `<div> <div><input [(ngModel)]="newItem" /> <button (click)="addItem(newItem)">Добавить</button> </div> <ul> @for(item of items; track $index){ <li>{{item}}</li> } </ul> </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 загружает и добавляет данные. Для работы с сервисами декоратор Component определяет секцию providers:
providers: [DataService, LogService]
Используем этот компонент DataComponent в главном компоненте приложения AppComponent:
import { Component} from "@angular/core"; import { DataComponent } from "./data.component"; @Component({ selector: "my-app", standalone: true, imports: [DataComponent], template: `<data-comp></data-comp> <data-comp></data-comp>` }) export class AppComponent {}
Этот компонент через элемент data-comp
вызывает компонент DataComponent. Причем вызывает два раза. То есть для обработки каждого элемента будет создаваться свой
объект DataComponent.
Теперь запустим приложение и попробуем добавить новый элемент:
Как видно на скриншоте, при добавлении в одном компоненте новый элемент будет добавляться только для этого компонента. Потому что у нас два отдельных компонента, и для каждого из них будет создаваться свой набор сервисов DataService и LogService.
Такое поведение не всегда может быть предпочтительным. Возможно, потребуется, чтобы компоненты использовали один и тот же объект сервиса, вместо создания разных сервисов для каждого компонента. Для этого мы можем зарегистрировать все сервисы не во вложенном компоненте, а в родительском компоненте AppComponent:
import { Component} from "@angular/core"; import { DataComponent } from "./data.component"; import {DataService} from "./data.service"; import {LogService} from "./log.service"; @Component({ selector: "my-app", standalone: true, imports: [DataComponent], providers: [DataService, LogService], template: `<data-comp></data-comp> <data-comp></data-comp>` }) export class AppComponent{ }
В этом случае мы уже можем убрать регистрацию сервисов из компонента DataComponent:
import { Component} from "@angular/core"; import { FormsModule } from "@angular/forms"; @Component({ selector: "data-comp", standalone: true, imports: [FormsModule], template: `<div> <div><input [(ngModel)]="newItem" /> <button (click)="addItem(newItem)">Добавить</button> </div> <ul> @for(item of items; track $index){ <li>{{item}}</li> } </ul> </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. Поэтому добавление объекта в одном компоненте автоматически отразится и на другом: