天天看點

Angular項目裡怎麼使用 jQuery 插件

          做項目遇到一個把HTML元素導出pdf的需求,查找資料後找到jQuery.print.js,在一個html頁面裡測試使用沒問題(自己記錄的文章)。但是項目使用的是Angular,安裝完jquery後可以很友善地使用,但是怎麼使用jquery的插件,比如jQuery.print,雖然引入了jquery.js和jQuery.print.js,但是控制台卻報錯:jquery未定義print方法。。。下面列出了使用Angular架構正确使用jquery及其插件的方式。

1、npm install @types/jquery  --save

2、npm install jquery --save           

    //不能直接安裝jquery,否則會報錯找不到jQuery的定義,原因如下:

Angular項目裡怎麼使用 jQuery 插件

3、安裝依賴jquery的jquery插件: npm install jQuery.print  --save

        如果通過使用import 'jQuery.print'的方式使用jQuery.print(),這時在使用jquery的時候會報錯jquery為定義print方法。

4、解決“jquery插件方法”未定義

        在Angular項目裡有個typings.d.ts檔案,在該檔案裡聲明jQuery的插件的方法。

Angular項目裡怎麼使用 jQuery 插件

        最後通過  import * as $ from  'jquery'友善地使用jquery和jquery插件的方法了,不需要"import jquery插件"。