Структура приложения Angular 2 / Базовый модуль и сторонние библиотеки
Я пытаюсь найти хороший способ структурировать свое приложение Angular 2. Angular 2 styleguide рекомендует создание основного модуля. Если я правильно понимаю, цель основного модуля - собрать одноразовые классы и компоненты и сохранить корневой модуль тонким. Там также написано, что я должен импортировать все модули, необходимые для активов, в основной модуль.
Я немного запутался, когда дело доходит до сторонних библиотек, которые должны быть включены в метод forRoot() (например, NgBootstrap или angular2-notifications). Обычно метод forRoot () должен вызываться только в корневом модуле. Должен ли я включать такие модули в корневой модуль или в основной модуль?
В следующем примере мне нужно сделать некоторые настройки для angular2-уведомлений. Чтобы сохранить мой корневой модуль тонким, я импортировал SimpleNotifications внутри основного модуля.
- Это правильный путь? Чтобы приложение работало, мне все равно нужно было импортировать SimpleNotificationsModule.forRoot() в модуль приложения.
- Почему мне нужно снова импортировать SimpleNotificationsModule в основной модуль. Не должно ли это быть предоставлено модулем приложения. Я думал, что благодаря forRoot () модуль ядра использует те же импортированные модули, что и модуль приложения?
- Должен ли я импортировать SimpleNotifications внутри основного модуля, если да? Должен ли я действительно вызвать метод forRoot () там?
Модуль приложения
...
import {SimpleNotificationsModule} from 'angular2-notifications';
@NgModule({
declarations: [...],
imports: [
BrowserModule,
CoreModule,
NgbModule.forRoot(),
SimpleNotificationsModule.forRoot(),
],
bootstrap: [AppComponent]
})
export class AppModule {}
Компонент приложения
...
<notifications></notifications>
Основной модуль
import {SimpleNotificationsModule} from 'angular2-notifications';
import {NotificationsComponent} from
'./notifications/notifications.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule,
RouterModule,
SimpleNotificationsModule
],
declarations: [...],
exports: [NotificationsComponent]
})
export class CoreModule {
constructor(@Optional() @SkipSelf() parentModule: CoreModule) {
throwIfAlreadyLoaded(parentModule, 'core module');
}
}
NotificationsComponent
import {Component, ViewEncapsulation} from '@angular/core';
@Component({
selector: 'notifications',
template: `<simple-notifications [options]="notificationOptions">
</simple-notifications>`,
styleUrls: ['./notifications.component.css'],
encapsulation: ViewEncapsulation.None
})
export class NotificationsComponent {
public notificationOptions = {
position: ['top', 'right'],
timeOut: 5000,
maxStack: 5,
lastOnBottom: true
};
}
1 ответ
.forRoot() используется, когда мы хотим зарегистрировать поставщиков услуг из модуля.
- Импортируйте модуль без forRoot (), если вам нужно сослаться на компонент / директивы или модели из модуля. Нет ограничений на то, сколько раз нужно импортировать модуль в приложение.
- Импортируйте модуль с помощью forRoot (), если вам нужно предоставить сервисы из модуля. Обычно мы импортируем модуль таким образом, чтобы использовать сервисы как синглтоны.
Таким образом, соглашение forRoot () представляет способ импорта модуля NgModule вместе с его провайдерами с использованием интерфейса ModuleWithProviders. Конвенция NgModule для Root ()
Базовый модуль обычно используется также для отдельных сюжетов (например, службы аутентификации, ведения журнала, службы уведомлений) и компонентов, которые используются только один раз (заголовок приложения, панель навигации, панель уведомлений). Этот модуль импортировал только те, что находятся в корне приложения.
Теперь ваши вопросы:
Просто импортируйте SimpleNotificationsModule.forRoot() в модуль Core и убедитесь, что вы импортируете модуль Core в модуль App. Нет необходимости импортировать SimpleNotificationsModule в модуль приложения. Кроме того, вы можете удалить NgbModule.forRoot() из модуля приложения и поместить его в основной модуль импорта.
Если у вас будут функциональные модули (например, UserManagementModule), вы можете импортировать SimpleNotificationsModule (без.forRoot()), и у вас будут все ссылки на компоненты уведомлений без создания вторых экземпляров служб уведомлений.