自定义组件未在 Ionic v4 + Angular 6 中显示

Posted 2023-03-13

【中文标题】自定义组件未在 Ionic v4 + Angular 6 中显示

【英文标题】：Custom component not showing in Ionic v4 + Angular 6

【发布时间】：2019-04-22 14:13:12

【问题描述】：

我正在尝试向我的 Ionic v4 webapp 添加一个自定义组件。我想我错过了一些东西，但我不知道是什么。控制台没有显示任何错误，但是它就像从未使用过的组件（我还在组件的 .ts 中尝试了一些日志，但它从未在控制台上打印过）。这是代码：

在 app/components/custom-component/custom-component.component.html

<p>
  my custom-component works!
</p>

在 app/components/custom-component/custom-component.component.ts

@Component(
  selector: 'app-custom-component',
  templateUrl: './custom-component.component.html',
  styleUrls: ['./custom-component.component.scss'],
  encapsulation: ViewEncapsulation.None
)
export class CustomComponentComponent implements OnInit 

  constructor() 

  ngOnInit() 

在 app/components/components.module.ts

import  IonicModule  from '@ionic/angular';
import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  CustomComponentComponent  from './custom-component/custom-component.component';

@NgModule(
  imports : [
    CommonModule,
    IonicModule.forRoot(),
  ],
  declarations: [
    ProgressBarComponent,
    CustomComponentComponent],
    exports: [CustomComponentComponent, ProgressBarComponent],
  entryComponents: [],
)
export class ComponentsModule 

然后我在我的主页中使用自定义组件，如下所示：

在 app/home/home.module.ts

import  IonicModule  from '@ionic/angular';
import  RouterModule  from '@angular/router';
import  NgModule, CUSTOM_ELEMENTS_SCHEMA  from '@angular/core';
import  CommonModule  from '@angular/common';
import  FormsModule  from '@angular/forms';
import  HomePage  from './home.page';
import  ComponentsModule  from '../components/components.module';

@NgModule(
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    RouterModule.forChild([ path: '', component: HomePage ]),
    ComponentsModule
  ],
  declarations: [HomePage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
)
export class HomePageModule 

并在 app/home/home.page.html

<ion-content>
--> <app-custom-component></app-custom-component> <--
</ion-content>

我用 ionic serve 命令启动应用程序，结果就是这样

如您所见，控制台中没有错误，但未显示组件内容。我错过了什么？谢谢

【参考方案1】：

正如用户 jjdev 在forum.ionicframework.com 所建议的那样

尝试在 ComponentsModule 的“entryComponents”数组中包含 CustomComponentComponent

这解决了问题。感谢 ionicframework 社区