Подтвердить что ты не робот

Что такое провайдеры в Angular2?

В конфигурации компонента Angular2 providers - один из ключей, которые мы могли бы указать. Как определяются эти поставщики и для чего они используются?

@Component({
  ..
  providers: [..],
  ..
})

Примечание

Angular2 документация постепенно созревает, но все еще разрежена. В настоящее время он определяет поставщиков как:

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

Это рекурсивное определение не очень полезно. Более подробное объяснение с примером действительно поможет.

4b9b3361

Ответ 1

Провайдеры обычно представляют собой одноточечные (один экземпляр) объекты, к которым доступны другие объекты через инъекцию зависимостей (DI).

Если вы планируете использовать объект несколько раз, например Http сервис в разных компонентах, вы можете запросить тот же экземпляр этой службы (повторное использование). Вы делаете это с помощью DI, предоставляя ссылку на тот же объект, который DI создает для вас.

@Component){
  ..
  providers: [Http]
}

.. вместо создания нового объекта каждый раз:

@Component){}
class Cmp {
  constructor() {
    // this is pseudo code, doens't work
    this.http = new Http(...options);
  }
}

Это приближение, но что общая идея Injection of Dependency - позволяет создавать дескриптор структуры и обслуживать объекты многократного использования... Поставщик является термином Angular для этих многократно используемых объектов (зависимостей).

Ответ 2

Зарегистрировать инъекции

Поставщики делают инъекции известными до Angular DI и определяют область инъекции (услуги).

Иерархия инжекторов

Angular DI создает дерево инжекторов (parent > child > grandchild > ...), которое напоминает структуру ваших компонентов и директив.

Один экземпляр для провайдера

Провайдеры поддерживаются на инжектор. Каждый поставщик предоставляет один экземпляр инъекции.

Поиск провайдера

Когда компонент или директива имеет зависимость (параметр конструктора), DI начинает искать этот компонентный инжектор для поставщиков. Если он имеет один, он запрашивает экземпляр от этого провайдера и вводит его.

Если инжектор не имеет провайдера для запрошенного ключа (типа), то посещает родительский инжектор, вплоть до корня (bootstrap), пока не будет найден провайдер, и его экземпляр может быть введен. (Если поставщик не найден, DI вызывает ошибку).

Определить область инъецируемого экземпляра

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

Синглтон или нет

Сколько мест, где вы предоставляете инъекцию, определяет, сколько экземпляров будет создано (они только создаются, если они действительно запрашиваются).

Если вам нужен один экземпляр для всего вашего приложения, укажите только корневой компонент один раз для инъекций (или bootstrap(AppComponent, [...])), что приведет к такому же поведению.

Если вы хотите создать новый экземпляр для каждого компонента A, добавьте его к поставщикам компонента A.

(обновление) NgModule ленивый и не ленивый

С введением модулей NgModule были введены дополнительные уровни. Провайдеры, зарегистрированные с не-ленивыми модулями, находятся выше корневого компонента в иерархии.

Lazy-загруженные модули выше компонентов и директив, загруженных этими компонентами.

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

См. также fooobar.com/questions/211875/...

Ответ 3

Подумайте о поставщиках, как о рецепте, который сообщает angular, как вводить службу.

Мы часто объявляем поставщиков в angular следующим образом:

providers: [AnyService]

Это всего лишь короткая рука для этого:

[new Provider(AnyService, {useClass: AnyService})]

Оба подхода говорят: "Когда кто-то требует" AnyService ", укажите класс" AnyService "

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

[new Provider(AnyService, {useClass: AnyServiceCustom})]

Но в обоих сценариях конструктор останется прежним:

constructor( private _anyService: AnyService) {
}

Чтобы лучше понять, вам нужно понять, как инъекция зависимостей работает в angular 2, поскольку провайдеры напрямую связаны с ней.

Это обязательное чтение для каждого разработчика angular 2.

https://angular.io/docs/ts/latest/guide/dependency-injection.html?The%20Provider%20class%20and%20provide%20function#!#injector-providers