2016-11-08 71 views
2

我想在angular-cli創建的angular2應用中使用一些jQuery插件。Angular-cli和jQuery插件

正如文檔中所述,我使用npm安裝了我需要的庫,並且在可用時也安裝了這些類型。 然後,我在angular-cli.json中添加了樣式和腳本,如果我打開chrome調試器,則可以看到這些庫已正確加載。

問題是,每次我嘗試使用任何jQuery插件時,我總是會在控制檯中顯示「該方法不是函數」的js錯誤。

我創建了一個使用jQuery和fullcalendar的小例子,它可以從這個GitHub倉庫中獲取。

https://github.com/vmilitello/jquery-plugin

注意只存在與jQuery插件,需要選擇運行(如$("#myItem").fullcalendar()$(".foo").steps())的問題。 如果您使用Sweetalert等庫,則不會出現該問題。

我相信我錯過了一些東西,但我真的無法弄清楚它是什麼!

謝謝。

回答

1

安裝(如果您沒有)

npm install @types/jquery --save-dev 

你需要寫在人工輸入的爲你的插件。比index.d.ts像

/custom_typings 
/fullcalendar 
    /index.d.ts 

創建結構

interface JQuery { 
    fullCalendar(options?: any): JQuery; 
} 

比tsconfig.json

"typeRoots": [ 
    "../node_modules/@types", 
    "../custom_typings" 
] 
+0

我的問題不是類型。你的建議只是讓我避免在寫我的打字稿文件時拋出jQuery選擇器。基本上而不是( $(「#calendar」))。fullcalendar();我可以寫$(「#calendar」)。fullcalendar();.但這與我的問題幾乎沒有關係。我更新了GitHub上的分支來證明此解決方案無效。不管怎樣,謝謝你。 – MilitelloVinx

+0

將您的打字文件命名爲index.d.ts而不是index.ts,而jQuery功能不是fullcalendar,它是fullCalendar,我在您的回購庫上試過並且它可以正常工作 –

+0

謝謝!我實際上正在與gitter.im上的一些人一起玩,我們也發現了這個問題。感謝您更新分支!欣賞它。我會離開這個分支希望它能幫助別人。謝謝! – MilitelloVinx

0

除了一個小細節的所有不正確它不工作。 作爲最後一部分提到here,你必須在你的組件

declare var $:any 

然後$將是全球性的,並會看到fullCalendar()功能,否則它沒有爲我工作。