Иерархическая зависимость инжекторов

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

Где настроить провайдеров

Вы можете настроить поставщиков для разных инжекторов в иерархии инжекторов. Внутренний инжектор уровня платформы используется всеми работающими приложениями. Инжектор AppModule является корнем иерархии инжекторов всего приложения, а внутри NgModule инжекторы уровня директив следуют структуре иерархии компонентов.

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

Когда вы указываете поставщиков в декораторе @Injectable () самой службы (обычно на корневом уровне приложения), инструменты оптимизации, такие как те, которые используются в производственных сборках CLI, могут выполнять встряхивание дерева, которое удаляет службы, которые не используются вашими пользователями. приложение. Дрожание деревьев приводит к меньшим размерам пучков.

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

Поставщики уровня NgModule могут быть указаны с помощью параметра метаданных поставщиков @NgModule () или с параметром @Injectable () provideIn (с некоторым модулем, отличным от корневого модуля AppModule).

@ Конфигурация уровня инъекций

Декоратор @Injectable () идентифицирует каждый класс обслуживания. Параметр метаданных обеспеченных в классе обслуживания настраивает определенный инжектор (обычно root) для использования декорированного класса в качестве поставщика службы. Когда инъецируемый класс предоставляет свой собственный сервис корневому инжектору, сервис доступен везде, где класс импортируется. Это показано ниже.

Код TypeScript:

import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root',
})
export class HeroService {
  constructor() { }
}

Демонстрация в реальном времени:

См. Pen @ injectable-level_configuration.ts от w3resource ( @ w3resource ) в CodePen .

@ Инжекторы уровня NgModule

Вы можете настроить провайдера на уровне модуля, используя опцию метаданных провайдеров для модуля NgModule без полномочий root, чтобы ограничить область действия провайдера этим модулем. Это эквивалентно указанию некорневого модуля в метаданных @Injectable (), за исключением того, что служба, предоставляемая через провайдеров, не может быть преобразована в дерево.

Как правило, вам не нужно указывать AppModule с обеспечить InIn, потому что корневой инжектор приложения является инжектором AppModule. Однако, если вы настраиваете провайдера для всего приложения в метаданных @NgModule () для AppModule, он переопределяет тот, который настроен для root в метаданных @Injectable (). Вы можете сделать это, чтобы настроить не-по умолчанию поставщика услуг, которые совместно используются несколькими приложениями. Пример:

providers: [
  { provide: LocationStrategy, useClass: HashLocationStrategy }
]

@ Инжекторы уровня компонентов

Отдельные компоненты в модуле NgModule имеют свои собственные инжекторы. Вы можете ограничить область действия поставщика компонентом и его дочерними элементами, настроив поставщика на уровне компонента с помощью метаданных @Component.

Код TypeScript:

import { Component } from '@angular/core';
import { StudentService } from './student.service';
@Component({
  selector: 'app-students',
  providers: [ StudentService ],
  template: `
    <h2>Students</h2>
    <app-student-list></app-student-list>
  `
})
export class StudentsComponent { }

Демонстрация в реальном времени:

Смотрите Pen @ component-level_injectors.ts от w3resource ( @ w3resource ) на CodePen .

Элемент инжекторов

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

Компоненты - это особый тип директивы, а свойство поставщиков @Component () наследуется от @Directive (). Директивы также могут иметь зависимости, и вы можете настроить провайдеров в их метаданных @Directive (). Когда вы настраиваете провайдера для компонента или директивы, используя свойство провайдеров, этот провайдер принадлежит инжектору для привязанного элемента DOM. Компоненты и директивы на одном элементе совместно используют инжектор.

Предыдущая: Поставщики зависимостей
Далее: навигация по дереву компонентов с помощью DI