親の子コンポーネントを角2で使用する

Question

私は以下の3つのレベルの入れ子になったコンポーネントをAngular2アプリケーションに用意しています。 （レイアウト/ヘッダ/サーチ）

layout/ 
├── header/ 
│  ├── search/ 
│  │  ├── search.component.ts 
│  │  └── search.component.html 
│  ├── header.component.ts 
│  └── header.component.ts 
├── layout.component.ts 
├── layout.component.html 
├── layout.component.css 
└── layout.module.ts 

私は私のheader.component.html内検索コンポーネントを呼び出すしようとしているが、言っコンソールのエラーで終了してい

'Error: Uncaught (in promise): Error: Template parse errors: 
'app-search' is not a known element:' 
... 

layout.module.ts

import { CommonModule } from "@angular/common"; 
import { NgModule } from "@angular/core"; 
import { layoutRouting } from "./layout.routing"; 

import { LayoutComponent } from "./layout.component"; 
import { HeaderComponent } from './header/header.component'; 

@NgModule ({ 
    declarations: [ 
     LayoutComponent, 
     HeaderComponent 
    ], 
    imports: [ 
     CommonModule, 
     layoutRouting 
    ] 
}) 

export class LayoutModule { } 

layout.component.html

<div class="layout"> 
    <app-header></app-header> 
</div> 

header.module.ts

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

import { HeaderComponent } from "./header.component"; 
import { SearchComponent } from './search/search.component'; 

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

export class HeaderModule { } 

header.component.html

<header class="header"> 
    <app-search></app-search> 
</header> 

あなたが上見ることができるように、私はすでにSearchComponentをインポートし、そして宣​​言しましたat @NgModule

layout.module.ts（両方の子の親コンポーネント）にSearchComponentをインポートすると、エラーなしで正常に動作します。

私は角CLI

例えばを使用してコンポーネントを生成しています：ng g c layout/home/search

私はここで間違って何をやっていますか？レイアウトを呼び出さずにヘッダ内の検索コンポーネントを使用するにはどうすればよいですか？私を助けてください。

Answer 1

header.module.ts

@NgModule ({ 
    declarations: [ 
     HeaderComponent, 
     SearchComponent 
    ], 
    imports: [ 
     CommonModule 
    ], 
    exports: [HeaderComponent] // make it public 
}) 
export class HeaderModule { } 

我々は彼らのコンポーネントテンプレートに含めることができHeaderModuleをインポートHeaderComponentので、他のモジュールをエクスポートします。あなたのケースではLayoutComponentは、そのテンプレートに

layout.module.ts

@NgModule ({ 
    declarations: [ 
     LayoutComponent 
    ], 
    imports: [ 
     CommonModule, 
     HeaderModule, // add here 
     layoutRouting 
    ] 
}) 

export class LayoutModule { } 

あなたは `HeaderComponentを宣言する必要が

• https://angular.io/docs/ts/latest/guide/ngmodule.html#!#feature-modules