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

时间:2018-12-17 11:34:52

标签: angular

在我的angular 7项目中使用了猫头鹰传送带。 在“首先”中将其添加到app.module.ts中:

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

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

然后我从共享文件夹的Component中使用了 enter image description here 像这样:

<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.要允许任何属性,请在此组件的“ @ NgModule.schemas”中添加“ NO_ERRORS_SCHEMA”。 (“] [options] =” MbannerCarouselOptions“ [项目] =”图像“ [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中使用此猫头鹰传送带时, 但是请参阅此组件中的错误。

1 个答案:

答案 0 :(得分:0)

从文件夹结构中,我看到BannerCarouselComponent作为SharedModule内的组件之一存在,但是OwlModule的导入已导入AppModule

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

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

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