javascript - Làm thế nào để tôi có thể sử dụng jquery owlCarousel trong dự án Angular 4

tôi có tệp 'carousel.js' của mình như

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

và carousel.component.html như sau:

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

Tôi đã gọi tệp 'carousel.js' trong carousel.component.ts như sau:

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

nó hoạt động một lần và một lần nữa không hoạt động !!!

có ai có thể giúp tôi ... cảm ơn ...

Câu trả lời #1

Bạn nên làm theo các bước dưới đây để sử dụng nó trong dự án angular dựa trên npm
Cài đặt mô-đun npm

npm install --save owl.carousel

npm install jquery

Bao gồm các tệp js trong phần scripts của angular-cli.json và khai báo chúng.

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

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

dành cho Jquery

declare var $: any;

Sau đó sử dụng .owlCarousel({...} để áp dụng 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();
  }
}

Đây là liên kết Github cho một ví dụ đang hoạt động.

Câu trả lời #2

Đây là mã của tôi...

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

}

Cuối cùng, vấn đề vẫn còn tồn tại !!