无法绑定到“选项”，因为它不是“猫头鹰轮播”的已知属性

Question

我在 Angular 7 项目中使用了 owl-carousel。 首先在 app.module.ts 中添加：

  import { SharedModule } from "./shared/shared.module";
  import {OwlModule} from "ngx-owl-carousel";

    @NgModule({
      declarations: [t
        ...
      ],
      imports: [
        ...
    ,SharedModule
    ,OwlModule]
 })

然后我从共享文件夹中的组件使用 像这样：

<owl-carousel  [options]="MbannerCarouselOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >
  <div class="item" *ngFor="let image of mySlideImages;let i = index">
   <div>
     <img src={{image}}/>
   </div>
  </div>

 </owl-carousel> 

但我有错误：

无法绑定到“选项”，因为它不是 '猫头鹰旋转木马'。 1. 如果 'owl-carousel' 是一个 Angular 组件并且它有 'options' 输入，那么验证它是这个模块的一部分。 2. 如果 'owl-carousel' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 压制此消息。 3. 要允许任何属性，请将“NO_ERRORS_SCHEMA”添加到该组件的“@NgModule.schemas”。 ("][options]="MbannerCarouselOptions" [items]="images" [carouselClasses]="['owl-theme', 'sliding']" >

我也声明了

mySlideImages =  ["../assets/image/slider/banner-2.jpg","../assets/image/slider/banner-1.jpg"];  
  myCarouselImages = ["../assets/image/slider/banner-2.jpg","../assets/image/slider/banner-1.jpg"];
  myCarouselOptions={items: 2,  nav: true};
  MbannerCarouselOptions ={items:1,  nav: true,lazyLoad:true,autoplay:true,autoplayTimeout:7000,autoplaySpeed:false,autoplayHoverPause:true,loop:true}; 

在banner-carousel.component.ts 中。

当我在 app.component.html 中使用这个 owl-carousel 时， 但是在这个组件中看到错误。

Answer 1

从文件夹结构中，我看到BannerCarouselComponent 是SharedModule 内的组件之一，但OwlModule 的导入已被导入AppModule。

所以从AppModule 中删除现有的导入并将OwlModule 导入到它的直接父模块，以便父模块识别轮播组件。

// shared.module.ts
import { OwlModule } from "ngx-owl-carousel";
...

@NgModule({
  imports: [
    OwlModule,
    ...
  ],
  ...
})