1

现在，对于我的应用程序的每一次溃败，我正在加载确切的模块。这是我的做法：

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在几个延迟加载的模块中使用时。

我该如何解决我的问题？

谢谢

4

1 回答 1

4

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

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 { }
于 2017-07-22T13:16:47.603 回答