Ionic 2 using third party js libs

时间:2016-08-31 12:25:26

标签: angular typescript ionic2

I am trying to use DrumJs in an ionic 2 project and this library requires to run $("select").drum() when the document is ready but even though i have it in a $(document).ready(function().....) it runs before the document Any ideas where to add this in order to run properly?

p.s. I can not import it in my .ts file so i'm using gulp to concatenate some js files that I import via the index.html

3 个答案:

答案 0 :(得分:1)

尝试使用其中一个生命周期事件运行代码,即:

SELECT
  r.recipe_id "Recipe ID"
  ,r.name "Recipe Name"
  ,m.name "Meal Name"
  ,array_agg(distinct(bucket.name)) as "Plans"
  ,mn_sodium.meas_amt "Recipe Sodium"
  ,mn_cholesterol.meas_amt "Recipe Cholesterol"
  ,sum(mn_sodium.meas_amt) OVER w_meal AS "Meal Sodium"
  ,sum(mn_cholesterol.meas_amt) OVER w_meal "Meal Cholesterol"
FROM
...
WINDOW w_meal AS (PARTITION BY m.name)

以下是文档:

http://ionicframework.com/docs/v2/api/components/nav/NavController/#lifecycle-events

答案 1 :(得分:1)

简而言之,您必须检查DrumJs是否有定义文件以使用带有Typescript的库,安装该定义包(文件结尾为 .d.ts ),然后将库导入你的脚本。

一步一步

  1. 为此,您必须安装 typings ,这就像这些定义的npm一样。要安装它,请执行 npm install -g typings

  2. 安装完成后,通过在终端上执行 typings search drumjs 来检查DrumJS是否有定义。试试drumjs,drum,drum.js,或许其中一个匹配你想要的图书馆。

  3. 如果库存在,请通过在本地文件夹 typings install drumjs --save 上运行来安装它。如果您有任何问题,请尝试 typings安装drumjs --save --global ,或者如果您遇到任何进一步的错误,请阅读打字文档。

    < / LI>
  4. 安装完定义后,您可以从npm安装脚本,运行 npm i --save drumjs (我想这是包的名称)

  5. 最后,在安装软件包及其定义后,将其导入到文件顶部的.ts脚本中,例如: import * as drum from“drumjs”;

  6. 使用drumJS:D

  7. 更进一步

    如果你需要Jquery来初始化drumJS,那么就像我告诉你的那样导入它,并在你的.ts脚本中编写一个方法 ngOnInit()

    然后,在其中写下 $(“select”)。drum()。有人这样想:

    class YourClass{
      ...
    
      ngOnInit(){ $("select").drum() }      
    
      ...
    }
    

    另外,检查Angular2的生命周期方法,有ngOnInit,但也有一些可能更适合这种情况。

答案 2 :(得分:0)

问题是我只能在html中导入它,否则我必须在代码(typescript文件)中导入d.ts文件,并且它们加载异步,因此我可能会遇到竞争条件一个setTimeout()但我真的不喜欢这个解决方案,所以我决定放弃尝试并尝试创建一个自己的新插件。