角度4。如何为延迟加载的子模块声明 components/import 模块？

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'
    }
];

如果我像这样在 app.module.ts 中声明以下组件：HeaderComponent, MenuComponent, FooterComponent：

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 是在两个地方声明的，并要求在上面包含 [ 的任何模块中声明=18=] 和 SiteAccountModule

P.S。如果我仅在 SiteIndexModule 中声明 HeaderComponent, FooterComponent, MenuComponent 并且不在 SiteAccountModule 中使用它们 - 一切正常。只有当我想在几个延迟加载的模块中使用 HeaderComponent, FooterComponent, MenuComponent 时才会出现问题。

我该如何解决我的问题？

谢谢

Answer 1

在多个模块中使用相同组件的情况下，执行此类操作的最佳方法是使用共享模块并将其导入到需要使用组件的子模块中。

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

不过，这个要点是您在根应用程序目录中有一个 /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 { }

角度4。如何为延迟加载的子模块声明 components/import 模块？

Angular4. How to declare components/import modules for lazy loaded submodules?

angular-router-loader

angular