角2のヘッダーとフッター用フィーチャーモジュール

Question

今、私はいくつかの標準コンポーネントを共通のページヘッダーにロードし、いくつかのコンポーネントを共通のページフッターにロードし、変更可能なページコンテンツをa <router-outlet> - それのように。

app.component.ts

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

そのすべてが正常に動作します - 私は本当に、さらにサイトを区分することを除いて。ヘッダーとフッターには、合計約20のコンポーネントがロードされています。 app.module.ts、app.component.ts、またはapp-routing.module.tsのすべての共通コンポーネントと、多くのリンクからのルートを混乱させたくありません。私は彼らを自分のフィーチャー・モジュールに移すことを好むでしょう。

共通ページヘッダーのすべてのコンポーネントをcommon-headerというフォルダに、共通ページのフッターのすべてのコンポーネントをcommon-footerというフォルダに移行しました。 （少なくとも、appディレクトリはあまり混乱していません）

さらに、common-header.moduleとcommon-footer.moduleと呼ばれるモジュールを作成しました。 common-header.componentとcommon-footer.componentを作成して、それぞれのヘッダーとフッターのコンポーネントを呼び出すためにhtmlをラップします。

これらの一般的なヘッダーとフッターの機能モジュールのコンテンツをすべてのページで呼び出して表示するにはどうすればよいですか。

Answer 1

コンポーネントがどのモジュールに入っているかは関係ありません。コンポーネント（およびディレクティブとパイプ）を使用するモジュールのインポートでは、フィーチャモジュールとフィーチャモジュールのエクスポートにコンポーネントがあることを確認してください。

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

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

とimportsにあなたは、このモジュールのディレクティブや配管を再利用したいものは何でもモジュールにこの方法を共有モジュールを追加します。