独自のコンポーネントを実装するサブモジュールを使用する

Question

今私は、使用する必要があるすべてのものをカバーするために、個々のコンポーネントをまとめてapp.moduleにインポートしています。 app.moduleだけheader.moduleをインポートする必要がありますように、私は理想的にやりたい何

AppModule 
    -Header Component 
    -Header Sub-Component 1 
    -Header Sub-Component 2 
    -Header Sub-Component 3 

がapp.moduleでそれらのすべてをインポートするのではなく、私は、独自のコンポーネントのすべてをインポートハンドルheader.moduleを作成したいとheader.moduleはそれ自身の依存関係を処理します。

私はこれを行う方法は多岐にわたりましたが、うまく動作しないようです。どのような構造が必要ですか？

私はやろうとした

：、ちょうどセットアップモジュール>コンポーネントの関係を取得しようとする

// Core 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 

// Components 
import { HeaderComponent } from "./header.component"; 
import { ButlerBarComponent } from './butler/butler.component'; 

@NgModule({ 
    declarations: [ 
     HeaderComponent, 
     ButlerBarComponent 
    ], 
    imports: [BrowserModule], 
    providers: [], 
    bootstrap: [ButlerBarComponent] 
}) 

export class HeaderModule { } 

：AppModuleで

import { HeaderModule } from "./header/header.module"; 

を、次にように見えたHeaderModuleを持っていますしかし私がこれを行うとき、app.component.htmlのヘッダーコンポーネントを呼び出す宣言は、headerセレクターにアクセスできなくなりました。

私はapp.component.htmlで<header></header>タグを入れて、アプリケーションの負荷header.moduleとその後のheader.componentを持っているとapp.component.htmlからheaderセレクタを利用可能にすることができますので、この作業をするために行うには何が必要ですか？

Answer 1

あなたはAppModuleでHeaderModuleをインポートするときにそれらにアクセスすることができ、あなたのHeaderModule内のすべてのこれらのコンポーネントを宣言し、そのようにAppModuleをエクスポートする必要があります。また、他のモジュールでは、ngIf、ngFor、ngClassなどの共通のディレクティブが含まれているので、代わりにCommonModuleをインポートする必要があります。最後に、1つのコンポーネントのみをブートストラップするので、ここではブートストラップは必要ありません。あなたはAppModuleでそれを行います。だから、あなたのHeaderModuleは次のようになります。

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 

import { HeaderComponent } from "./header.component"; 
import { ButlerBarComponent } from './butler/butler.component'; 

@NgModule({ 
    imports: [ 
     CommonModule 
    ], 
    declarations: [ 
     HeaderComponent, 
     ButlerBarComponent 
    ], 
    exports: [ 
     HeaderComponent, 
     ButlerBarComponent 
    ] 
}) 

export class HeaderModule { } 

を今、あなたは、あなたのAppModuleの輸入にHeaderModuleを追加する必要があり、あなたが行く準備ができなければなりません。