Question

我在Angular 7中使用Owl轮播。首先，我使用

安装

 npm install ngx-owl-carousel owl.carousel jquery --save

然后添加

 "scripts": ["./node_modules/jquery/dist/jquery.min.js",
 "./node_modules/owl.carousel/dist/owl.carousel.min.js"]

在angular.json文件中并添加

import { OwlModule } from 'ngx-owl-carousel';
imports: [
 BrowserModule,
 OwlModule
]

在app.module.ts文件中然后我用

public ngOnInit()
{
 /*----------------------------
        Slideshow
    ------------------------------ */
    $('.slideshow').owlCarousel({
      items: 6,
      autoPlay: 3000,
      singleItem: true,
      navigation: true,
      navigationText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
      pagination: true
  });
}

在app.component.ts文件中，但有错误

core.js：14576错误TypeError：jquery__WEBPACK_IMPORTED_MODULE_2 __（...）。owlCarousel不是函数

我在哪里弄错了？请帮我。谢谢。

Answer 1

导入OwlModule后，您可以在Angular模板中使用其导出的组件，如下所示（示例取自github repo）：

   <owl-carousel
     [options]="{items: 3, dots: false, navigation: false}"
     <!-- If images array is dynamically changing pass this array to [items] 
     input -->
    [items]="images"
    <!-- classes to be attached along with owl-carousel class -->
      [carouselClasses]="['owl-theme', 'row', 'sliding']">
    <div class="item" *ngFor="let image of images;let i = index">
       <div class="thumbnail-image" [ngStyle]="{'background': 'url(abc.jpg) 
       no-repeat scroll center center / 80px 80px'}"></div>
    </div>
   </owl-carousel>

Answer 2

安装jQuery和猫头鹰轮播

npm install --save jquery

npm install --save owl.carousel

在需要使用owl carousel的组件ts文件中导入库

import * as $ from 'jquery';
import "owl.carousel/dist/owl.carousel.min"
declare var $:any;

将猫头鹰轮播样式表导入全局样式表-styles.css

@import "~owl.carousel/dist/assets/owl.carousel.min";

Angular 7中的猫头鹰旋转木马

2 个答案: