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

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

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

我在做什麼錯在這裏？如何在不調用佈局的情況下使用頭中的搜索組件？請幫幫我。

來源

2017-01-01 Body

您需要聲明'HeaderComponent '在你的佈局模塊 – Dummy

@Dummy它已包含在內。請檢查我的更新後的帖子。 – Body

你在哪裏使用HeaderModule？並且不要忘記HeaderModule – yurzui

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

來源

2017-01-01 20:20:24 yurzui

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

回答

相關問題