javascript - 我如何在 Angular 4 项目中使用 jquery owlCarousel

Question

我有我的“carousel.js”文件

$('#owl-carousel-1').owlCarousel({...});

和 carousel.component.html 为:

<div id="owl-carousel-1" class="owl-carousel owl-theme center-owl-nav home- 
carousel">....</div>

我在 carousel.component.ts 中调用了“carousel.js”文件:

ngAfterViewInit(){
  require("../../../assets/js/carousel.js");
}

一次又一次失败!!!

谁能帮帮我……谢谢……

Answer 1

您应该按照以下步骤在基于 npm 的 Angular 项目中使用它
安装 npm 模块

npm install --save owl.carousel

npm install jquery

在 angular-cli.json 脚本部分中包含 js flies 并声明它们。

  "styles": [
    "styles.css",
    "../node_modules/owl.carousel/dist/assets/owl.carousel.min.css",
    "../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/owl.carousel/dist/owl.carousel.min.js"
  ],

HTML 代码

<div class="owl-carousel" #carousel>
  <div> Your Content 1 </div>
  <div> Your Content 2 </div>
  <div> Your Content 3 </div>
  <div> Your Content 4 </div>
  <div> Your Content 5 </div>
  <div> Your Content 6 </div>
  <div> Your Content 7 </div>
</div>

对于 Jquery

declare var $: any;

然后使用.owlCarousel({...}应用owlCarousel。

Component.ts

import { Component, AfterContentInit, ViewChild, ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterContentInit{

  @ViewChild('carousel') el:ElementRef;
  ngAfterContentInit(): void {
    console.log(this.el);
    $(this.el.nativeElement).owlCarousel();
  }
}

这是 Github Link一个工作示例。