Question

我试图用角度做所有事情，而不是使用jQuery。不幸的是，有一个组件需要它。但是，我只想在该组件上加载jQuery插件.js文件（因此它没有被加载到任何地方......）

我做了以下

npm install jquery --save
npm install --save-dev @ types / jquery
更新Angular-cli.json＆gt;脚本＆gt; jQuery.min.js

问题

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

非常感谢任何帮助。

更新

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

＆＃39; $（＆＃34;＃myCanvas＆＃34）注释（选项）;＆＃39;

[ts] Property＆＃39; annotate＆＃39;在类型＆＃39; JQuery＆＃39;。
上不存在

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

＆＃13;

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

＆＃13;

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插件？

1 个答案: