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

Posted 2023-03-13

【中文标题】Ionic 4 无法导入自定义组件不是已知元素

【英文标题】：Ionic 4 cannot import custom component is not a know element

【发布时间】：2019-04-14 15:54:33

【问题描述】：

我是 Ionic 的新手，我想创建一个自定义列表视图，其中包含以下链接：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

expandable.component.html：

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

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');   
  

这是我尝试使用它的方式：

<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]
)

【问题讨论】：

我也有同样的问题。你找到什么了吗？

请看我解决的答案

【参考方案1】：

在 Ionic 3 和 4 中，帮助我的是，记住添加是不够的

import  ComponentsModule  from '../../components/components.module';

...
@NgModule(
  imports: [
    ...
    ComponentsModule,
    ...
  ],

致您的app.module.ts

您还需要将其添加到每个页面的模块中！

src/app/home/home.module.ts
src/app/about/about.module.ts
src/app/game/game.module.ts

我从不喜欢在NgModule 中使用CUSTOM_ELEMENTS_SCHEMA ...

【参考方案2】：

我找到了解决方案，你必须在组件的根目录下创建一个component.module.ts，然后在你的导入中添加ComponentsModule

component.module

【参考方案3】：

组件选择器的问题。您已经定义了选择器 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 

【讨论】：

我已经尝试过了，但它不起作用......我有同样的信息。

请问还有什么想法吗？

请创建相同的 stackblitz 演示。

我无法使用 stackblitz 创建自定义组件...而且我使用 ionic 4，stackblitz 是 ionic 3