Ionic 4无法导入自定义组件不是已知元素 [英] Ionic 4 cannot import custom component is not a know element
问题描述
我是Ionic的新手,我想创建一个自定义列表视图,其中包含可扩展项,并通过以下链接:
I am new to Ionic and I want to create a custom listview with expandable items following this link : https://www.joshmorony.com/creating-an-accordion-list-in-ionic/.
问题是我的自定义组件从未被识别,我尝试了很多事情,但无济于事...我使用的是Ionic 4,他们没有在文档中谈论组件的生成.
The problem is that my custom component is never recognized, I have tried many things but nothing works... I am using Ionic 4 and they do not talk of component generation in their doc.
错误是:
Error: Template parse errors:
'expandable' is not a known element:
1. If 'expandable' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.
expandable.component.html:
expandable.component.html :
<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
<ng-content></ng-content>
</div>
expandable.component.ts:
expandable.component.ts :
import { Component, Input, ViewChild, ElementRef, Renderer } from '@angular/core';
@Component({
selector: 'app-expandable',
templateUrl: './expandable.component.html',
styleUrls: ['./expandable.component.scss']
})
export class ExpandableComponent {
@ViewChild('expandWrapper', {read: ElementRef}) expandWrapper;
@Input('expanded') expanded;
@Input('expandHeight') expandHeight;
constructor(public renderer: Renderer) {
}
ngAfterViewInit(){
this.renderer.setElementStyle(this.expandWrapper.nativeElement, 'height', this.expandHeight + 'px');
}
}
这就是我尝试使用它的方式:
And here is how I am trying to use it :
<expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
Hello people
</expandable>
最后,我的app.module.ts:
Finally, my app.module.ts :
@NgModule({
declarations: [AppComponent, ExpandableComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
IonicStorageModule.forRoot()
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
DatabaseService,
PetService,
SQLite
],
bootstrap: [AppComponent]
})
推荐答案
我找到了解决方案,您必须在组件的根目录下创建component.module.ts
,然后添加导入文件ComponentsModule
I found the solution, you have to create a component.module.ts
at the root of your component, and then add in your imports ComponentsModule
这篇关于Ionic 4无法导入自定义组件不是已知元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!