下面是我的文件夹结构。
app
- common
- header
header.component.css
header.component.html
header.component.ts
- footer
footer.component.css
footer.component.html
footer.component.ts
- index
index.component.css
index.component.ts
index.component.html
index.module.ts
- lessons
lesson1(another folder)
lesson2(folder)
lesson.module.ts
app.component.css
app.component.ts
app.component.html
app.module.ts
我已经在 app.module 中导入了页眉和页脚组件、index.module、lesson.module 并使用了
<app-header></app-header>
<app-navbar></app-navbar>
在index.component.html、lesson1.component.html、lesson2.component.html中。
但我收到“app-header”不是已知元素错误。有人可以帮我解决这个错误吗?
如果我直接在 index.module.ts 中包含页眉和页脚组件,效果会很好
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes } from '@angular/router';
import * as $ from 'jquery';
import { AppComponent } from './app.component';
import { HeaderComponent } from './common/header/header.component';
import { FooterComponent } from './common/footer/footer.component';
import { IndexModule } from './index/index.module';
import { LessonModule } from './index/lesson.module';
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
IndexModule,
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
index.component.html
<app-header></app-header> <app-navbar></app-navbar>
index.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { IndexComponent } from './index.component';
import { IndexRoutingModule } from './index-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule,
IndexRoutingModule
],
declarations: [
IndexComponent
]
})
export class IndexModule { }
lesson.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Lesson1Component } from './lesson1.component';
import { Lesson2Component } from './lesson2.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
HttpModule,
IndexRoutingModule
],
declarations: [
IndexComponent
]
})
export class IndexModule { }
最佳答案
加载应用程序的 Bootstrap 模块是什么?
如果你想在一个模块中声明组件并在另一个模块中使用它们,你需要export
它们,这样当你将模块导入另一个模块时,它会明白这些将被使用来自另一个模块
因此在您的 app.module.ts
中声明并导出它们,以便索引模块应该理解这些来自其他模块。
@NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
RouterModule,
IndexModule,
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
exports: [
HeaderComponent,
FooterComponent,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
现在将 app.module 导入到你的索引模块中
@NgModule({
imports: [
AppModule,
CommonModule,
FormsModule,
HttpModule,
IndexRoutingModule
],
declarations: [
IndexComponent
]
})
export class IndexModule { }
我会说将您的应用程序模块作为一个 Bootstrap 模块并创建一个共享模块并声明所有组件、管道、指令并将它们导出。并在您的应用程序模块中导入共享模块并使用所有组件。
关于javascript - 错误 : 'app-header' is not a known element: Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46053834/