Как настраивать инжекторы с провайдерами на разных уровнях?

В Angular инжекторы создаются для управления зависимостями и предоставления необходимых сервисов компонентам приложения. Важно уметь настраивать инжекторы с провайдерами на различных уровнях, поскольку это позволяет контролировать область доступности сервисов, их жизненный цикл и внедрение зависимостей.

Что такое инжектор?

Инжектор — это механизм, который отвечает за создание экземпляров классов и их обслуживание. Angular использует иерархическую структуру инжекторов, что позволяет создавать провайдеров на разных уровнях. Например, вы можете определить провайдер на уровне корневого инжектора, уровне модуля или компонента.

Провайдеры на разных уровнях

1. Корневой инжектор: Обеспечивает глобальный доступ к сервису, доступному во всем приложении.
2. Модульный инжектор: Доступен только для компонентов, которые находятся внутри этого модуля.
3. Компонентный инжектор: Практически гарантирует, что это экземпляр доступен только для этого компонента и его дочерних компонентов.

Настройка провайдеров

Рассмотрим пример, когда у нас есть сервис ExampleService, который мы хотим настроить на разных уровнях:

// example.service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',  // Корневой инжектор
})
export class ExampleService {
  constructor() {
    console.log('ExampleService создан');
  }
}

Провайдер на уровне модуля

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

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { ExampleService } from './example.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [ExampleService],  // Модульный инжектор
  bootstrap: [AppComponent]
})
export class AppModule {}

Провайдер на уровне компонента

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

// example.component.ts
import { Component } from '@angular/core';
import { ExampleService } from './example.service';

@Component({
  selector: 'app-example',
  template: `<h1>Пример компонента</h1>`,
  providers: [ExampleService],  // Компонентный инжектор
})
export class ExampleComponent {
  constructor(private exampleService: ExampleService) {
    console.log('ExampleComponent создан');
  }
}

Отличия в жизненном цикле

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

Заключение

Понимание иерархии инжекторов и управления провайдерами является важной частью работы с Angular. Это позволяет не только организовать код, но и оптимизировать его по жизненному циклу и доступности сервисов. Не стесняйтесь экспериментировать с настройкой провайдеров на разных уровнях в ваших проектах!