Question

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

Answer 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

Answer 2

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

一步一步

为此，您必须安装 typings ，这就像这些定义的npm一样。要安装它，请执行 npm install -g typings 。
安装完成后，通过在终端上执行 typings search drumjs 来检查DrumJS是否有定义。试试drumjs，drum，drum.js，或许其中一个匹配你想要的图书馆。
如果库存在，请通过在本地文件夹 typings install drumjs --save 上运行来安装它。如果您有任何问题，请尝试 typings安装drumjs --save --global ，或者如果您遇到任何进一步的错误，请阅读打字文档。
< / LI>
安装完定义后，您可以从npm安装脚本，运行 npm i --save drumjs （我想这是包的名称）
最后，在安装软件包及其定义后，将其导入到文件顶部的.ts脚本中，例如： import * as drum from“drumjs”;

使用drumJS：D

更进一步

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

然后，在其中写下 $（“select”）。drum（）。有人这样想：

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

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

Answer 3

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

Ionic 2 using third party js libs

3 个答案: