當要在Angular4裡面使用jquery plugin一般會怎麼做呢？

General
1

各位先進好

不好意思小弟還在自學中，也嘗試在實作，但遇到了實作上問題…也沒人能討論…所以上來求救QQ
想請問各位大大，當使用Angular-cli建立的Project，想使用像owl-carusel這種jquery套件時，一般都怎麼做呢？
Angular 4 or 2 套件好像都不多，目前只看到ngx-carusel，但他沒有動畫…
所以想問問看各位大大一般如果遇到沒有支援angular的套件的時候，一般會怎麼解決呢？

2

這是我找套件順序

  1. 先找有沒有Angular版本的

  2. 到TypeSearch看看有沒有jquery版的定義檔.
    => 會找到@types/owlcarousel

  3. 如果以上兩點都沒有,就自己寫簡易版的定義檔,讓owl-carusel通過typescript.
    請參考保哥的影片=> Angular 2 與 TypeScript 2 如何擴充 jQuery Plugin 的模組定義檔

3個讚
3

感謝Joe大大熱心提供方法，我在查的時候好像有看過@types/owlcarousel這東西但我不太懂xd，我再來研究看看，有什麼心得我再回覆到這篇底下，感恩R

4

定義檔裡面寫的是庫的型別資訊 , 只是為了讓Typescript檢查能通過.
像是jquery需要裝@types/jquery , 但用法也是和原本的jquery一樣.

1個讚
5

提供 TypeSearch 的一個簡短網址: http://aka.ms/types

之前寫使用 JQuery 的應用時會寫成 Directive:

<div myOwlCarousel></div>

import { Directive, ElementRef, OnDestroy, OnChanges } from '@angular/core';

@Directive({
  selector: '[myOwlCarousel]',
})
export class OwlCarouselDirective implements OnChanges, OnDestroy {
  $el: JQuery;

  constructor(el: ElementRef) {
    this.$el = $(el.nativeElement);
  }

  ngOnChanges() {
    this.ngOnDestroy();
    this.$el.owlCarousel({});
  }

  ngOnDestroy() {
    this.$el.owlCarousel('destroy');
  }
}
1個讚
6

做個註解，給之後跟我有同樣問題新手朋友
要裝plugin之前如owlcarousel，如以下步驟

1.npm install --save owlcarousel (先安裝plugin本體)

2.npm install --save @types/owlcarusel (再安裝plugin ts定義檔) or 自己寫定義檔如joe大大提供的保哥影片

3.到angular-cli.json裡面將plugin的js 與css分別加入scripts:[]與styles[],
ex
"styles": [
“scss/styles.scss”,
"…/node_modules/owlcarousel/owl-carousel/owl.carousel.css",
"…/node_modules/owlcarousel/owl-carousel/owl.theme.css",
"…/node_modules/owlcarousel/owl-carousel/owl.transitions.css"
],
“scripts”: [
"…/node_modules/jquery/dist/jquery.min.js",
"…/node_modules/owlcarousel/owl-carousel/owl.carousel.min.js"
],

4.增加type至tsconfig.json，本機自行測試請修改tsconfig.app.json
ex：
“types”: [
“jquery”,
"owlcarousel
],

5.再來就看要寫成directive或直接使用都可以

這是我目前使用的步驟，因為我也是新手，所以把一些細節都寫出來，方便新手查看
如有錯還是有更好的方法，歡迎高手幫忙指正，感謝哦

6個讚
7

感謝 @A-Za_Chen 大大的拋磚引玉
小弟也是新手一枚
發現大大提供的方法是舊版的 Owl Carousel 1
文章距今也間隔了十個月
最近有找到適用於 Angular 5 的 Owl Carousel 2.2.1 (目前最新版)
並且也成功 run 起來

相關步驟因為我寫的太臭太長了
所以放在我的 blog 上
提供給有相關困擾的新手們參考
也歡迎各位大大們不吝賜教喔!!

2個讚