Angular

Question

我已尝试在 angular 中完成所有操作，但未使用 jQuery。不幸的是，只有一个组件需要它。但是，我只想在该组件上加载 jQuery 插件 .js 文件（因此它不会被加载到任何地方......）

我做了以下

npm 安装jquery --保存
npm install --save-dev @types/jquery
更新 Angular-cli.json > 脚本 > jQuery.min.js

问题

只在索引文件中加载插件是否值得？
如果没有，如何在将要使用它的组件上加载插件文件？

如有任何帮助，我们将不胜感激。

更新

我已经加载了答案中提到的 jQuery 插件，但是出现错误：

'$("#myCanvas").annotate(选项);'

[ts] Property 'annotate' does not exist on type 'JQuery'.

加载的文件和打字稿文件之间是否存在脱节？

  loadAnnotate(): void {
    const jQueryCdnUrl = `assets/scripts/djaodjin-annotate.js`;
    const node = document.createElement('script');
    node.src = jQueryCdnUrl;
    node.type = 'text/javascript';
    node.async = false;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }


  loadAnnotateSettings(){
    var counter = 0;

   $('#myCanvas').on("annotate-image-added", function(event, id, path){
    $(".my-image-selector").append("<label><input type=\"radio\" name=\"image-selector\" class=\"annotate-image-select\" value=\"" + path + "\" checked id=\"" + id + "\"><img src=\"" + path + "\" width=\"35\" height=\"35\"></label>");
   });


   var options = {
    width: "600",   // Width of canvas
    height: "400",   // Height of canvas
    color:"red",    // Color for shape and text
    type : "rectangle",  // default shape: can be "rectangle", "arrow" or "text"
    images: ['https://www.w3schools.com/w3css/img_fjords.jpg'],   // Array of images path : ["images/image1.png", "images/image2.png"]
    linewidth:2,   // Line width for rectangle and arrow shapes
    fontsize:"20px",  // font size for text
    bootstrap: true,  // Bootstrap theme design
    position: "top",  // Position of toolbar (available only with bootstrap)
    idAttribute: "id",  // Attribute to select image id.
    selectEvent: "change", // listened event to select image
    unselectTool: false  // display an unselect tool for mobile
      }
      
      

      $("#myCanvas").annotate(options);
  }

Answer 1

constructor() {
  this.loadJQuery()

  const script = document.getElementById('dynamicScript')
  script.onload = //Do your thing now

}


loadJquery(): void {
  const jQueryCdnUrl = `jquerycdn`;
  const node = document.createElement('script');
  node.src = jQueryCdnUrl;
  node.type = 'text/javascript';
  node.async = false;
  node.id = 'dynamicScript'
  node.charset = 'utf-8';
  document.getElementsByTagName('head')[0].appendChild(node);
}

Angular - 是否可以为一个组件加载 jquery 插件？

Angular - Is it possible to load a jquery plugin for one component?

jquery

jquery-plugins