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

标签 typescript dependency-injection angular6 custom-component ionic4

我正在尝试将自定义组件添加到我的 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

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

最佳答案

正如用户 jjdev 在 forum.ionicframework.com 上的建议

Try including CustomComponentComponent in the ‘entryComponents’ array in the ComponentsModule

问题解决了。感谢 ionicframework 社区

关于typescript - 自定义组件未显示在 Ionic v4 + Angular 6 中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53387840/

相关文章:

c# - 在 ConfigureServices 中为通用类添加 DI

java - 如何解开 Guice ProvisionException 的包装?

angular6 - StaticInjectorError 在角度 6 中执行 ssr 时, 'instanceof' 的右侧不是对象问题

angular - 在表格的一行内单击按钮更改属性 [禁用] 值 - Angular 6

javascript - 如何定义一个具有多个条目的对象作为参数的函数,该函数只接受一个条目?

angular - 类型 header 不可分配给 TypeScript 和 Angular 9 中的 HttpHeaders 类型

c# - 内置的 Ninject 程序集加载器是否有错误处理

javascript - 在 Angular 组件中使用 @Input 和 @Output 共享数据

typescript - 如果 obj 是其中一种类型,如何检查属性是否存在

visual-studio - 如何从 Visual Studio 项目中删除 Typescript 支持?