Javascript 如何在Angular 4项目中使用jquery owlCarousel

我的“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>

这是一次又一次的工作，不是工作

---

谁能帮我。。。谢谢…

您应该按照以下步骤在基于npm的角度项目中使用它
安装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>

然后使用

.owlCarousel（{…}

应用owlCarousel

组件。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();
  }
}

---

下面是一个工作示例的示例。

这是我的代码…

  "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"
  ],

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>

{{commService.limitString（sliderPost.title，80）}

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
      },
    }
  }
  );
}

}

import{Component，OnInit，AfterViewInit，AfterContentInit，ViewChild，ElementRef}从'@angular/core'导入；
声明var$：任何；
....
导出类IndexComponent实现OnInit，AfterViewInit{
@ViewChild（“旋转木马”）el:ElementRef；
....
ngAfterViewInit（）：void{
$（this.el.nativeElement）.owlCarousel(
{
循环：对，
保证金：0，
点：错，
导航：是的，
是的，
导航文本：[''，'
'],
自动播放：对，
响应：{
0: {
项目：1
},
992: {
项目：2
},
}
}
);
}
}

---

最后，问题仍然存在！！

最佳解决方案是：

创建一个调用Owl转盘的方法 Jquery

carousel（）{
/*旋转编码*/
}

使用setTimeout并调用函数

setTimeout（carousel，5000）

，这会在5秒后调用函数，您可以使用这些值查看哪一个最适合您

根据您的情况放置setTimeout：

• 如果您有本地图片（即已定义的数组），请将其置于

  ngOnInit

• 如果您使用服务来恢复图像数据，那么在响应中放置计时器，以便首先填充数组，然后执行jquery

干杯

---

Ps：此解决方案是面向对象的，因此您可以在转盘上使用ngfor

如果您在NGONITT（）中调用数据库数据服务，则可以通过路由器解析方式调用所有元数据-“解析服务”因此，在组件启动之前，您将准备好数据。

不导入文件，只需将js代码写入组件，或者将此文件导入index.html文件中即可。在组件中定义此文件时不起作用，如：$（'#owl-carousel-1'）。owlCarousel（{…}）为什么不通过npm使用ngx滑块？这是（html，css，js文件）模板，我正在angular 4项目中工作，我想知道如何在不改变设计的情况下实现这些模板…也不工作！！感谢您的努力和良好的合作，我会再试一次。。。

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
      },
    }
  }
  );
}

}