在Angular 2的父級中使用子組件

Question

我的Angular2應用程序中有以下3級嵌套組件。 （佈局/頭/搜索）

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和並宣佈在@NgModule

如果我在layout.module.ts（這是兩個孩子的父組件）導入SearchComponent，它按預期工作，沒有任何錯誤。

我生成採用了棱角分明CLI

組件

e.g：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 { } 

又見

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