用于页眉和页脚的Angular 2功能模块

Question

Right now, I have a generic set-up where I am loading several standard components into a common page header, several components into a common page footer, and the changeable page content is displayed through a <router-outlet> --kind of like so.

app.component.ts

<div> Several header components loaded and displayed here. </div>
<router-outlet>
<div> Several footer components loaded and displayed here. </div>

All of that works fine--except that I really want to further compartmentalize the site. There are a total of about 20 components that are loading in the header and the footer. I really don't want to clutter up my app.module.ts , my app.component.ts , or the main app-routing.module.ts with all of these common components and the routes from their many links. I would much prefer to move them into their own feature modules.

I have already migrated all of the components for the common page header to a folder called common-header and all of the components for the common page footer to a folder called common-footer . (At least the app directory is not so cluttered.)

I even created modules called common-header.module and common-footer.module , respectively. I created a common-header.component and common-footer.component to wrap the html to call of the respective header and footer components.

How can I call and display the content from these common header and footer feature modules on every page?

Answer 1

It doesn't matter what module the components are in. Just ensure you have the components in exports of the feature module and the feature modules in imports of the modules where you want to use the components (and directives and pipes)

@NgModule({
  exports: [DirectiveA, PipeB, ComponentC],
  declarations: [DirectiveA, PipeB, ComponentC]
})
class MySharedModule{}

@NgModule({
  imports: [BrowserModule, MySharedModule],
  declarations: [AppComponent],
  declarations: [Bootstrap],
})
class AppModule{}

and add the shared module to imports this way in whatever module you want to reuse directives or pipes of this module.