页面未在 Ionic 4 中呈现组件

Question

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

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

我做了一个组件'heroes':

导出带有选择器 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 是模块的一部分。

我不知道我做错了什么，根据我对 angular 框架的理解，它应该可以工作，但由于某种原因它没有。所以请帮助我，感觉我对 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 {}

页面未在 Ionic 4 中呈现组件

Page not rendering component in Ionic 4

ionic-framework

angular

ionic4