Ionic 5 角度在两个模块之间共享组件

Question

我有一个名为“推荐”的组件，我想在两个不同的页面上呈现它。因此，根据在线资源，我创建了一个共享模块并将组件添加到其中。然后我将模块导入到我需要的两个模块中。但是在尝试编译时我收到如下错误：

rror: src/app/recommendations/recommendations.component.html:69:5 - error NG8001: 'ion-card-subtitle' is not a known element:
1. If 'ion-card-subtitle' is an Angular component, then verify that it is part of this module.
2. If 'ion-card-subtitle' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

69     <ion-card-subtitle>

声明如下所示

@NgModule({
  declarations: [
    RecommendationsComponent
  ],
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    RecommendationsComponent
  ]
})
export class SharedCompsModule { }

模块1

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    Tab1PageRoutingModule,
    SharedCompsModule
  ],
  declarations: [
    Tab1Page,
  ]
})
export class Tab1PageModule {}

模块2

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
    Tab3PageRoutingModule,
    SharedCompsModule
  ],
  declarations: [
    Tab3Page
  ]
})
export class Tab3PageModule {}

我缺少什么？

Answer 1

我们需要确保在共享模块上声明的组件也可以访问离子组件，我们可以通过导入/导出组件工作所需的其他模块来做到这一点！这里我导入的是

IonicModule

@NgModule({
  declarations: [
    RecommendationsComponent
  ],
  imports: [
    IonicModule, // <- changed here!
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
  ],
  exports: [
    RecommendationsComponent
  ]
})
export class SharedCompsModule { }