Angular-是否可以为一个组件加载一个jQuery插件? [英] Angular - Is it possible to load a jquery plugin for one component?

问题描述

我已经尝试过用角度做所有事情，而不使用jQuery.不幸的是，有一个组件需要它.但是，我只想在该组件上加载jQuery插件.js文件(因此它不会在任何地方加载...)

I've tried to do everything in angular and not use jQuery. Unfortunately, there's one component that requires it. However, I would like to only load the jQuery plugin .js file on that component (so it's not being loaded everywhere...)

我已完成以下操作

1. npm install jquery --save
2. npm install --save-dev @ types/jquery
3. 更新Angular-cli.json>脚本> jQuery.min.js

问题

1. 仅将插件加载到索引文件中值得吗?
2. 如果没有，如何将插件文件加载到将要使用的一个组件上?

任何帮助将不胜感激.

Any assistance would be much appreciated.

更新

我已经按照答案中的说明加载了jQuery插件，但是出现了以下错误:

I've loaded the jQuery plugin as mentioned in the answer, but there's an error on:

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

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

[ts]类型"JQuery"上不存在属性注释".

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

加载的文件和打字稿文件之间是否断开连接?

Is there a disconnect between the loaded file and the typescript file?

  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);
  }

推荐答案

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插件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！