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

处声明

如果我导入SearchComponent中的layout.module.ts（这是两个子节点的父组件），它会按预期工作而不会出现任何错误。

我正在使用Angular 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 {  }

我们导出HeaderComponent，以便导入HeaderModule的其他模块可以将其包含在其组件模板中。在您的情况下，LayoutComponent可以在其模板中包含app-header

<强> 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

在Angular 2中使用父级中的子组件

1 个答案: