Angular 4 找不到在模块内创建的组件

Question

我有一个非常简单的问题。

我使用 cli 创建了一个新的 Angular 项目。然后我创建了一个名为主页的模块和组件。在主页中，我创建了一个名为横幅的组件。

我的主应用程序可以很好地导入组件。但是首页好像不能导入。

这是我的项目结构:

├── app.component.html
├── app.component.sass
├── app.component.spec.ts
├── app.component.ts
├── app.module.ts
├── home-page
│   ├── banner
│   │   ├── banner.component.html
│   │   ├── banner.component.sass
│   │   ├── banner.component.spec.ts
│   │   └── banner.component.ts
│   ├── home-page.component.html
│   ├── home-page.component.sass
│   ├── home-page.component.spec.ts
│   ├── home-page.component.ts
│   └── home-page.module.ts
└── simple-grid.scss

这是主页.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home-page',
  templateUrl: './home-page.component.html',
  styleUrls: ['./home-page.component.sass']
})
export class HomePageComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

这是主页.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './banner/banner.component';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BannerComponent,
    HomePageComponent
  ]
})
export class HomePageModule { }

主页.component.html:

<div>
  <banner></banner>

</div>

banner.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'banner',
  templateUrl: './banner.component.html',
  styleUrls: ['./banner.component.sass']
})
export class BannerComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

banner.component.html:

<div id="app" class="container">
  <div class="row">
    <div class="col-4 center"><p>1</p></div>
    <div class="col-4 center"><p>2</p></div>
    <div class="col-4 center"><p>3</p></div>
  </div>
</div>

我知道以前有人问过这种类型的问题，但他们看起来像是在问陌生人进口商品。我认为我的应该更基本，所以我想知道我错过了哪一步，或者我是否有错别字之类的。

谢谢

Answer 1

您在 HomePageModule 中缺少 export 语句

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BannerComponent } from './banner/banner.component';
import { HomePageComponent } from './home-page.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    BannerComponent,
    HomePageComponent
  ],
/////////////// added  below    ////////////////////////////////////
exports: [
    BannerComponent,
    HomePageComponent
  ]
})
export class HomePageModule { }