Модули обмена

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

Обычно, если вы попытаетесь использовать компонент для нескольких модулей, angular выдаст вам ошибку:

Type xxxComponent is part of the declarations of 2 modules: xxxModule and yyyModule

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

Использование компонентов против служб из других модулей.

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

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

Как мы создаем общие модули?

Во-первых, конечно, вам нужно создать модуль. Ему не нужно нигде включать слово shared, это может быть что-то вроде:

Код TypeScript:

import{NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
   imports:[
     CommonModule
   ]
})
export class DateModule{}

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

См. Pen sharedModule0.ts от w3resource ( @ w3resource ) в CodePen .

Этот модуль будет содержать все, что связано с датами для вашего приложения (средство выбора даты, средства форматирования и т. Д.).

Давайте теперь включим компонент в этот модуль ...

Код TypeScript:

import {DatePickerComponent} from './datepicker.component';
import{NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
   imports:[
     CommonModule
   ],
declarations:[
	DatePickerComponent
]
})
export class DateModule{}

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

См. Pen sharedModule1.ts от w3resource ( @ w3resource ) в CodePen .

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

Код TypeScript:

import {DatePickerComponent} from './datepicker.component';
import{NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
   imports:[
     CommonModule
   ],
declarations:[
	DatePickerComponent
],
exports: [
 DatePickerComponent
  ]
})
export class DateModule{}

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

См. Pen sharedModule2.ts от w3resource ( @ w3resource ) в CodePen .

Теперь вы разрешаете другим модулям, которые импортируют DateModule, иметь доступ к DatePickerComponent.

Используя этот же подход, вы можете экспортировать каналы и директивы, но вы не можете использовать это для экспорта сервисов. Для сервисов вам необходимо добавить функцию forRoot () в общий модуль. Вы собираетесь в конечном итоге что-то вроде этого:

Код TypeScript:

import {DatePickerComponent} from './datepicker.component';
import{NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
   imports:[
     CommonModule
   ],
declarations:[
	DatePickerComponent
],
exports: [
 DatePickerComponent
  ]
})
export class DateModule{
static forRoot(){
return {
ngModule:DateModule,
providers: [DateFormatterService]
};
}
}

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

См. Pen sharedModule3.ts от w3resource ( @ w3resource ) в CodePen .

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

Вы также можете передать параметры в метод forRoot для настройки инициализации службы. Если вам нужны params, ваш код будет выглядеть примерно так:

Код TypeScript:

import {DatePickerComponent} from './datepicker.component';
import{NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
@NgModule({
   imports:[
     CommonModule
   ],
declarations:[
	DatePickerComponent
],
exports: [
 DatePickerComponent
  ]
})
export class DateModule{
static forRoot(){
return {
ngModule:DateModule,
providers: [
{provide: DateFormatterService, useValue:culture
}]
};
}
}

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

См. Pen sharedModule4.ts от w3resource ( @ w3resource ) в CodePen .

В вашем сервисе вы получаете эти значения на конструкторе:

import {Injectable, Optional} from '@angular/core';
@Injectable()
Export class DataFormatterService {
Constructor(@optional() private _culture:String){}
}

Заключение

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

Предыдущий: NgModule API
Далее: Часто задаваемые вопросы по NgModule