angular - Ionic 4 无法导入自定义组件不是已知元素

Question

我是 Ionic 的新手，我想通过以下链接创建一个带有可扩展项目的自定义 ListView :https://www.joshmorony.com/creating-an-accordion-list-in-ionic/ .

问题是我的自定义组件从未被识别，我已经尝试了很多东西但没有任何效果......我正在使用 Ionic 4，他们没有在他们的文档中谈论组件生成。

错误是:

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.

Here is my project folder

可扩展组件.html:

<div #expandWrapper class='expand-wrapper' [class.collapsed]="!expanded">
    <ng-content></ng-content>
</div>

可扩展组件.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');   
  }

}

下面是我尝试使用它的方式:

<expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
      Hello people
</expandable>

最后，我的 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]
})

Answer 1

组件选择器的问题。您已经定义了选择器 app-expandable 但是您正在使用 expandable替换下面的代码

<expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
      Hello people
</expandable>

由

<app-expandable [expandHeight]="itemExpandHeight" [expanded]="pet.expanded">
      Hello people
</app-expandable>

或

或者您更改 ExpandableComponent 中的选择器

@Component({
  selector: 'expandable', //<-- change here
  templateUrl: './expandable.component.html',
  styleUrls: ['./expandable.component.scss']
})
export class ExpandableComponent {

}