Перейти к содержанию

API NgModule

📅 28.02.2022

На высоком уровне NgModules — это способ организации Angular-приложений, который достигается за счет метаданных в декораторе @NgModule. Метаданные делятся на три категории:

Категория Подробности
Static Конфигурация компилятора, которая сообщает компилятору о селекторах директив и о том, где в шаблонах эти директивы должны быть применены через сопоставление селекторов. Эта конфигурация задается с помощью массива declarations.
Runtime Конфигурация инжектора с помощью массива providers.
Composability / Grouping Объединение NgModules и обеспечение их доступности с помощью массивов imports и exports. 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
@NgModule({
  // Static, that is compiler configuration
  declarations: [], // Configure the selectors

  // Runtime, or injector configuration
  providers: [], // Runtime injector configuration

  // Composability / Grouping
  imports: [], // composing NgModules together
  exports: [] // making NgModules available to other parts of the app
})

Метаданные @NgModule

Далее приведены свойства метаданных @NgModule.

declarations

Список декларируемых классов (компонентов, директив и пайпов), которые принадлежат данному модулю.

  • При компиляции шаблона необходимо определить набор селекторов, которые должны использоваться для запуска соответствующих им директив.
  • Шаблон компилируется в контексте NgModule — того NgModule, в котором объявлен компонент шаблона — который определяет набор селекторов по следующим правилам:
    • Все селекторы директив, перечисленных в declarations.
    • Все селекторы директив, экспортированных из импортированных NgModules.

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

providers

Список провайдеров инжекции зависимостей.

Angular регистрирует эти провайдеры в инжекторе NgModule. Если это NgModule, используемый для bootstrapping, то это корневой инжектор.

Эти сервисы становятся доступными для инжекции в любой компонент, директиву, пайп или сервис, являющийся дочерним по отношению к этому инжектору.

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

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

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

Более подробную информацию об иерархии инжекторов и их масштабировании можно найти в Providers и в DI Guide.

imports

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

Точнее, как если бы в этом модуле был объявлен список модулей, на экспортируемые компоненты, директивы или пайпы которых ссылаются шаблоны компонентов.

Шаблон компонента может ссылаться на другой компонент, директиву или пайп, если ссылка объявлена в этом модуле или если импортируемый модуль экспортировал его. Например, компонент может использовать директивы NgIf и NgFor только в том случае, если модуль импортировал Angular CommonModule (возможно, косвенно, путем импорта BrowserModule).

Многие стандартные директивы можно импортировать из CommonModule, но некоторые знакомые директивы принадлежат другим модулям. Например, использовать [(ngModel)] можно только после импорта модуля Angular FormsModule.

exports

Список деклараций — компонентных, директивных и трубных классов — которые может использовать импортирующий модуль.

Экспортируемые декларации являются публичным API модуля. Компонент другого модуля может использовать UserComponent этого модуля, если он импортирует этот модуль и этот модуль экспортирует UserComponent.

По умолчанию декларации являются приватными. Если этот модуль не экспортирует UserComponent, то только компоненты внутри модуля this могут использовать UserComponent.

Импорт модуля не приводит к автоматическому реэкспорту импортов импортируемого модуля. Модуль 'B' не может использовать ngIf только потому, что он импортировал модуль 'A', который импортировал CommonModule. Модуль 'B' должен сам импортировать CommonModule.

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

Re-export делает транзитивность модулей явной. Если модуль 'A' реэкспортирует CommonModule, а модуль 'B' импортирует модуль 'A', то компоненты модуля 'B' могут использовать ngIf, даже если сам модуль 'B' не импортировал CommonModule.

bootstrap

Список компонентов, которые автоматически загружаются.

Обычно в этом списке присутствует только один компонент — корневой компонент приложения.

Angular может запускаться с несколькими компонентами bootstrap, каждый из которых имеет свое собственное местоположение на главной веб-странице.

Подробнее о NgModules

Возможно, вас также заинтересует следующее:

Ссылки

Комментарии