Question

我想在home组件中使用product-carousel.module.ts。我的产品轮播模块看起来像

const COMPONENTS = [
  ProductBlockComponent,
  ProductCarouselComponent,
  ProductCarouselContainerComponent
];

@NgModule({
imports: [
  CommonModule,
  RouterModule
],
declarations: COMPONENTS,
providers: [],
exports: COMPONENTS
})
export class ProductCarouselContainerModule {}

比我在home.module.ts

注册

@NgModule({
imports: [
  ProductCarouselContainerModule,
  CommonModule,
  FormsModule,
  ProductCarouselContainerModule,
  ComponentsModule,
  ]),
 ],
 declarations: [
  HomeContainer
 ],
 providers: [
   ProductApiService
 ]
})
export class HomeModule {}

我想使用ProductCarouselContainerComponent。它有选择器'offer-carousel'。在家庭组件我像这样使用它

<div class="container-fluid currently-funding">
   <product-carousel></product-carousel>
</div>

结果我有

错误：模板解析错误：'Product-carousel'不是已知元素：1。如果'offer-carousel'是Angular组件，则验证它是否是此模块的一部分。 2.如果'Product-carousel'是Web组件，则添加'CUSTOM_ELEMENTS_SCHEMA

我错过了什么？

Answer 1

错误实际上显示在屏幕截图中。问题是HomeComponent是在ComponentsModule而非HomeModule中声明的。

在ComponentsModule中更改此内容会使其正常工作（很明显存在异步管道错误，但显然还有其他错误）：

app / home / components / index.ts：

import { OfferCarouselModule } from './../../offer/offer-carousel.module';

@NgModule({
  imports: [
    CarouselModule.forRoot(),
    CommonModule,
    ReactiveFormsModule,
    RouterModule,
    SlickModule,
    OfferCarouselModule
  ],
  declarations: COMPONENTS,
  exports: COMPONENTS,
})
export class ComponentsModule { }

使用导入模块

1 个答案: