Question

我正在尝试将JQCloud集成在angular2中。我能够在我的ts文件中访问jquery，但无法访问ts中的JQ Cloud。

 ngAfterViewInit(){
   //here you will have code where component content is ready.
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.js";
    jQuery("head").append(s);

    jQuery('#jqcloud').jQCloud(this.data,{
    width: 500,
    height: 350
    });

}

请指导我。

Answer 1

正如PierrDuc所说，你应该像添加jQuery一样将它导入你的项目。

有一个名为jqcloud-npm

的NPM模块

npm install --save jqcloud-npm

然后在你的main.ts（或导入jquery的地方）：

import 'jqcloud-npm';

然后，您可以检查ts文件中是否有jqcloud：

declare var jQuery: any;
...    
console.log(jQuery().jQCloud);

似乎比在初始化视图后尝试添加脚本更安全的解决方案。下载脚本并在setTimeout函数中访问jQCloud时没有竞争条件。

Answer 2

ngAfterViewInit(){
   //here you will have code where component content is ready.
    var s = document.createElement("script");
    s.type = "text/javascript";
    s.src = "http://mistic100.github.io/jQCloud/dist/jqcloud2/dist/jqcloud.min.js";
    jQuery("head").append(s);

    // FILE DOWNLOAD TAKES SOME TIME HERE.
    // YOU MIGHT WANT TO SET A TIMEOUT.
    setTimeout(function(){
       jQuery('#jqcloud').jQCloud(this.data,{
          width: 500,
          height: 350
       });
    }.bind(this), 1500);
}

Angular2中的JqCloud实现

2 个答案: