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

Question

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

我做了以下事情

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

问题

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

任何帮助将不胜感激。

更新

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

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

[ts] 类型“JQuery”上不存在属性“annotate”。

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

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