角4。如何为延迟加载的子模块声明组件/导入模块？

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 in app.module.ts 就像这样：

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



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

• 我的SiteIndexComponent 和其他延迟加载的组件哭诉他们不知道HeaderComponent, FooterComponent, MenuComponent 并要求声明它们。

但是！

如果我在SiteIndexModule 和SiteAccountModule 中都声明HeaderComponent, FooterComponent, MenuComponent - 这些哭泣是HeaderComponent, FooterComponent, MenuComponent 在两个地方声明并要求在上面包含SiteIndexModule 和SiteAccountModule 的任何模块中声明

附：如果我仅在 SiteIndexModule 中声明 HeaderComponent, FooterComponent, MenuComponent 并且不通过 SiteAccountModule 使用这些 - 一切都很好。问题只是当我想在几个延迟加载的模块中使用HeaderComponent, FooterComponent, MenuComponent 时。

我该如何解决我的问题？

谢谢

Answer 1

在多个模块中使用相同组件的情况下，最好的方法是使用共享模块并将其导入到您需要在其中使用组件的子模块中。

The Angular Docs 很好地解释了它的工作原理。还有大量关于在线使用“共享”模块的资源。我会说，如果您养成了共享单条服务的习惯，那么值得您花时间研究服务的工作原理，尤其是在延迟加载模块的上下文中。

不过，这个要点是，您的应用根目录中有一个 /shared 文件夹，其中包含一个 shared.module.ts 模块，以及您想要共享的所有组件、指令、服务等。这里的技巧是，除了将它们导入shared.module.ts 之外，您还将它们导出，以便使用共享模块的其他模块可以访问它们。然后，当您想在模块中使用其中任何一个时，您可以导入共享模块。

src/app/src/app/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 { }