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

You should follow below steps to use it in npm based angular project
Install npm module

npm install --save owl.carousel

npm install jquery

Include js flies in angular-cli.json scripts sections and declare them.

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

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

for Jquery

declare var $: any;

Then use .owlCarousel({...} to apply 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();
  }
}

Here is the Github Link for an working example.

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

最好的解决方案是： 1.创建一个将调用“猫头鹰轮播”的方法 jQuery的 carousel（）{ 轮播代码 }（很抱歉，我正在使用手机） 2.使用setTimeout并调用函数setTimeout（carousel，5000），这将在5秒钟后调用该函数，您可以使用这些值来查看哪个最适合您 3.根据您的情况放置setTimeout：如果您有本地图片（即，已定义的数组），请将其放置在ngOnInit上，如果您正在使用服务来恢复图像数据，则将计时器放入响应中，以便填充数组首先，然后执行jQuery 干杯! 附言：此解决方案是面向性的，因此您可以在转盘上使用ngfor

Answer 4

如果您要通过ngOnIntIt（）调用数据库中的数据服务，则可以通过路由器解析方式调用所有元数据“解析服务” ，这样，在组件初始化数据之前准备好了。

我如何在Angular 4 Project中使用jQuery owlCarousel

4 个答案: