Angular 2 Feature Modules für Kopf- und Fußzeilen

Question

Im Moment habe ich ein generisches Setup, wo ich mehrere Standardkomponenten in einen gemeinsamen Seitenkopf, mehrere Komponenten in einen gemeinsamen Seitenfuß lade und den veränderbaren Seiteninhalt anzeigt a <router-outlet> - so ähnlich.

app.component.ts

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

All das funktioniert gut - außer dass ich wirklich will, um die Website compartmentalize. Es gibt insgesamt etwa 20 Komponenten, die in der Kopf- und Fußzeile geladen werden. Ich möchte wirklich nicht meine app.module.ts, meine app.component.ts, oder die Haupt app-routing.module.ts mit all diesen gemeinsamen Komponenten und die Routen von ihren vielen Links. Ich würde viel lieber sie in ihre eigenen Feature-Module verschieben.

Ich habe bereits alle Komponenten für den allgemeinen Seitenheader in einen Ordner mit dem Namen common-header und alle Komponenten für den allgemeinen Seitenfuß in einen Ordner mit dem Namen common-footer migriert. (Zumindest das App-Verzeichnis ist nicht so überladen.)

Ich habe sogar die Module common-header.module bzw. common-footer.module erstellt. Ich habe einen common-header.component und common-footer.component erstellt, um den HTML-Code zum Aufruf der entsprechenden Kopf- und Fußzeilenkomponenten zu verpacken.

Wie kann ich den Inhalt dieser allgemeinen Kopf- und Fußzeilen-Funktionsmodule auf jeder Seite aufrufen und anzeigen?

Answer 1

Es spielt keine Rolle, in welchem ​​Modul sich die Komponenten befinden. Stellen Sie sicher, dass Sie die Komponenten im Export des Feature-Moduls und der Feature-Module beim Importieren der Module haben, in denen Sie die Komponenten (und Anweisungen und Pipes) verwenden möchten.

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

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

und fügen Sie in den gemeinsam genutzten Modul imports auf diese Weise, was auch immer Modul wollen Sie Richtlinien oder Rohre dieses Moduls wieder zu verwenden.