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

现在，对于我的应用程序的每一个路由，我都在加载确切的模块。我是这样做的：

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是在两个位置声明的，并要求在上面包含SiteIndexModule和SiteAccountModule的任何模块中声明

注意：如果我仅在SiteIndexModule中声明HeaderComponent、FooterComponent、MenuComponent，并且SiteAccountModule不使用这些组件，则一切都正常。只有当我想在几个延迟加载的模块中使用HeaderComponent、FooterComponent、MenuComponent时，才会出现问题

我如何解决我的问题

---

谢谢

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

很好地解释了它是如何工作的。关于在线“共享”模块的使用，也有大量的资源。我要说的是，如果你养成了共享Singleton服务的习惯，那么花时间研究服务是如何工作的是值得的，尤其是在延迟加载模块的环境中

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

src/app/src/app/shared/shared.module.ts

从“@angular/core”导入{NgModule}； 从“@angular/common”导入{CommonModule}； 从'@angular/forms'导入{FormsModule}； 从“./PATH-TO-FILE”导入{FooterComponent}； 从“./PATH-TO-FILE”导入{HeaderComponent}； 从“./PATH-TO-FILE”导入{menucomponent}； @NGD模块{ 导入：[CommonModule]， 声明：[HeaderComponent、FooterComponent、MenuComponent]， 导出：[HeaderComponent、FooterComponent、MenuComponent CommonModule，FormsModule] } 导出类SharedModule{}

---

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

很好地解释了它是如何工作的。关于在线“共享”模块的使用，也有大量的资源。我要说的是，如果你养成了共享Singleton服务的习惯，那么花时间研究服务是如何工作的是值得的，尤其是在延迟加载模块的环境中

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

src/app/src/app/shared/shared.module.ts

从“@angular/core”导入{NgModule}； 从“@angular/common”导入{CommonModule}； 从'@angular/forms'导入{FormsModule}； 从“./PATH-TO-FILE”导入{FooterComponent}； 从“./PATH-TO-FILE”导入{HeaderComponent}； 从“./PATH-TO-FILE”导入{menucomponent}； @NGD模块{ 导入：[CommonModule]， 声明：[HeaderComponent、FooterComponent、MenuComponent]， 导出：[HeaderComponent、FooterComponent、MenuComponent CommonModule，FormsModule] } 导出类SharedModule{}

---

你能添加一个让你的代码更可读的代码吗：@0mpurdy我不知道这件事；谢谢分享。它去哪里了？我猜是在代码块的顶端？没问题！是的，它在代码块上方-在我之前的评论中的链接中有更多的细节，我也没有，尽管非常有用！谢谢。你能添加一个让你的代码更易读的名字吗：@0mpurdy我不知道这件事；谢谢分享。它去哪里了？我猜是在代码块的顶端？没问题！是的，它在代码块上方-在我之前的评论中的链接中有更多的细节，我也没有，尽管非常有用！谢谢