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在两个地方宣布，并要求在上面包含{{1}的任何模块中声明}和SiteIndexModule

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

如何解决我的问题？

感谢

Answer 1

在几个模块中使用相同组件的最佳方法是使用共享模块并将其导入到使用组件所需的子模块中。

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

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

<强>的src /应用程序/ SRC /应用程序/共享/ 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 { }

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

1 个答案: