Angular4. Как объявить компоненты / модули импорта для лениво загруженных подмодулей?

Question

На данный момент для каждого маршрута моего приложения я загружаю точный модуль. Вот как я это делаю:

const routes: Routes = [
    {
        path: '',
        loadChildren: './pages/site-index/site-index-routing.module#SiteIndexRoutingModule'
    }
    {
        path: 'account',
        loadChildren: './pages/site-account/site-account-routing.module#SiteAccountRoutingModule'
    }
];

Если я объявлю следующие компоненты: HeaderComponent, MenuComponent, FooterComponent в app.module.ts как это:

const BASE_COMPONENTS: any[] = [
    HeaderComponent,
    FooterComponent,
    MenuComponent
];



@NgModule({
    imports: [
        BrowserModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        ...BASE_COMPONENTS
    ],
    bootstrap: [ AppComponent ]
})

• мой SiteIndexComponent и остальные компоненты, которые были лениво плачут, что они не знают HeaderComponent, FooterComponent, MenuComponent и попросить объявить их.

Но!

Если я заявляю HeaderComponent, FooterComponent, MenuComponent оба в SiteIndexModule а также SiteAccountModule - эти крики HeaderComponent, FooterComponent, MenuComponent были объявлены в двух местах и ​​просят объявить в любом модуле выше, содержащем SiteIndexModule а также SiteAccountModule

PS если я объявлю HeaderComponent, FooterComponent, MenuComponent только в SiteIndexModule и не используйте их SiteAccountModule - все отлично. Проблема только тогда, когда я хотел бы использовать HeaderComponent, FooterComponent, MenuComponent в нескольких лениво загруженных модулях.

Как я могу решить мою проблему?

Спасибо

Answer 1

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

Angular Docs довольно хорошо объясняет, как это работает. Есть также множество ресурсов, касающихся использования "общих" модулей онлайн. Я скажу, что если вы привыкли делиться синглтон-сервисами, стоит потратить время на то, чтобы точно изучить, как сервисы работают, особенно в контексте лениво загруженных модулей.

Эта суть в том, что у вас есть /shared папка в корневом каталоге приложения с shared.module.ts модуль в нем, вместе со всеми компонентами, директивами, службами и т. д. вы хотите поделиться. Хитрость в том, что наряду с импортом их в shared.module.tsвы также экспортируете их, чтобы другие модули, использующие общий модуль, получили к ним доступ. Затем, когда вы захотите использовать любой из них в модуле, вы импортируете общий модуль.

SRC / приложение / SRC / приложение / Shared/shared.module.ts

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule }         from '@angular/forms';

import { FooterComponent }  from './PATH-TO-FILE';
import { HeaderComponent }  from './PATH-TO-FILE';
import { MenuCompoonent } from './PATH-TO-FILE';

@NgModule({
  imports:      [ CommonModule ],
  declarations: [ HeaderComponent, FooterComponent, MenuComponent ],
  exports:      [ HeaderComponent, FooterComponent, MenuComponent
                  CommonModule, FormsModule ]
})
export class SharedModule { }