【发布时间】:2023-12-06 01:24:01
【问题描述】:
我正在尝试向我的 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 命令启动应用程序,结果就是这样
如您所见,控制台中没有错误,但未显示组件内容。我错过了什么?谢谢
【问题讨论】:
标签: typescript dependency-injection angular6 custom-component ionic4