我怎样才能在Angular 4 Project中使用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的角度项目中使用它 安装npm模块

npm install --save owl.carousel

npm install jquery

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

  "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。

Answer 2

这是我的代码......

index.component.html

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

<article *ngFor="let sliderPost of allMainSliderPosts; let i = index;" class="article thumb-article">

    <div class="article-img">
        <img [src]="defaultImgPath + sliderPost.img" alt="{{commService.limitString(sliderPost.title, 105)}}">
    </div>

    <div class="article-body">
        <ul class="article-info">
            <li class="article-category">
                <a href="javascript:;">{{sliderPost.category_name}}</a>
            </li>
            <li class="article-type">
                <i *ngIf="sliderPost.post_type === 'videos' || sliderPost.post_type === 'photos-library'" class="fa fa-camera"></i>
                <i *ngIf="sliderPost.post_type === 'posts'" class="fa fa-file-text"></i>
            </li>
        </ul>
        <h2 class="article-title">
            <a routerLink="/p/{{sliderPost.slug}}">
                {{commService.limitString(sliderPost.title, 80)}}
            </a>
        </h2>

    </div>
</article>

index.component.ts

import { Component, OnInit, AfterViewInit, AfterContentInit, ViewChild, ElementRef } from '@angular/core';

declare var $: any;
....
export class IndexComponent implements OnInit, AfterViewInit {
@ViewChild('carousel') el: ElementRef;
....
ngAfterViewInit(): void {
    $(this.el.nativeElement).owlCarousel(
    {
    loop: true,
    margin: 0,
    dots: false,
    nav: true,
    rtl: true,
    navText: ['<i class="fa fa-angle-left"></i>', '<i class="fa fa-angle-right"> 
           </i>'],
    autoplay: true,
    responsive: {
      0: {
        items: 1
      },
      992: {
        items: 2
      },
    }
  }
  );
}

}

最后，问题依然存在!!

Answer 3

如果您在ngOnIntIt（）中调用来自数据库的数据服务，那么您可以在路由器解析方式中调用所有元数据 - “解析服务”，以便在组件启动数据准备就绪之前。

Answer 4

最好的解决方案和适用于我的解决方案是：

1. 创建一个将调用您的Owl Carousel Jquery的方法

   carousel() {
      /* carousel code */
   }

2. 使用setTimeout并调用函数setTimeout(carousel, 5000)，这会在5秒后调用该函数，您可以使用这些值来查看哪一个最适合您
3. 根据您的具体情况放置setTimeout： 如果您有本地图片（即一个已定义的数组），请将其放在ngOnInit上， 如果您正在使用服务来恢复图像数据，那么将计时器放在响应中，以便首先填充数组，然后执行jquery

干杯!

Ps：这个解决方案是面向的，所以你可以在你的旋转木马上使用ngfor