页面未在 Ionic 4 中呈现组件

Question

我正在尝试在 Ionic 中完成 Angular 的英雄之旅指南，但遇到了一些问题。

这可能是因为我误解了 Ionic 工作原理的基本原理，但这里是：

我已经制作了一个组件“英雄”：

使用选择器 app-heroes 导出 HeroesComponent：

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

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.scss']
})
export class HeroesComponent implements OnInit {

  heroName = "Regularhero";

  constructor() { }

  ngOnInit() {
  } 

}

我在我的主页中导入它：

import { Component } from '@angular/core';
import {HeroesComponent} from '../heroes/heroes.component';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  title = "Tour of Heroes";

}

我尝试在 home.page.html 中使用 app-heroes 组件：

<ion-header>
  <ion-toolbar>
    <ion-title>
      <h1>{{title}}</h1>
    </ion-title>
  </ion-toolbar>
</ion-header>
<ion-content padding>
  <app-heroes>

  </app-heroes>
</ion-content>

如果失败，应用程序编译并尝试加载页面。

但是我在控制台中得到了所有错误的母亲，它是一个模板解析错误，说明我需要验证 app-heroes 是模块的一部分。

我不知道我做错了什么，根据我对角度框架的理解，它应该可以工作，但由于某种原因它没有。所以请帮助我，感觉我对 ionic4/angular 有一些基本的误解

编辑： 根据要求，这是我的 app.module：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { HeroesComponent } from './heroes/heroes.component';

@NgModule({
  declarations: [AppComponent, HeroesComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

您忘记在HomeModule 中声明您的 HeroesComponent

@NgModule({
  ...
  declarations: [..., HeroesComponent],
  ...
})
export class HomeModule {}