Ionic 2 使用第三方 js 库

Question

我正在尝试在 ionic 2 项目中使用 DrumJs 并且此库需要运行 $("select").drum() 当文档准备就绪时但即使我在 $(document).ready(function().....) 它在文档之前运行s 有什么想法可以在哪里添加这个以便运行正确吗？

p.s。我无法将它导入到我的 .ts 文件中，所以我使用 gulp 连接我通过 index.html

导入的一些 js 文件

Answer 1

尝试使用生命周期事件之一运行您的代码，即：

ionViewLoaded() {
    $("select").drum();
}

这是文档：

Answer 2

问题是我只能在 html 中导入它，否则我必须制作一个 d.ts 文件以在代码（打字稿文件）中导入，并且它们加载异步所以有我可以用 setTimeout() 来克服竞争条件，但我真的不喜欢这个解决方案，所以我决定放弃尝试并尝试制作我自己的新插件。

Answer 3

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

循序渐进

为此，您必须安装 typings，它类似于这些定义的 npm。要安装它，请执行 npm install -g typings。
安装后，通过在终端上执行 typings search drumjs 检查 DrumJS 是否有定义。尝试 drumjs、drum、drum.js，也许其中之一与您想要的库相匹配。
如果该库存在，请通过运行在您的本地文件夹中安装它 typings install drumjs --save。如果您有任何问题，请尝试 typings install drumjs --save --global，如果您遇到任何进一步的错误，请阅读 typings 的文档.
安装定义后，您可以从 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，但也有其他的可能更适合这种情况。

Ionic 2 using third party js libs