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

问题描述 投票:1回答:1

我正在尝试将自定义组件添加到我的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命令启动应用程序,这就是结果

screenshot

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

typescript dependency-injection angular6 custom-component ionic4
1个回答
0
投票

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

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

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

© www.soinside.com 2019 - 2024. All rights reserved.