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

问题

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...)

I have done the following

1. npm install jquery --save
2. npm install --save-dev @types/jquery
3. Update Angular-cli.json > scripts > jQuery.min.js

Questions

1. Is it worth just loading the plugin in the index file?
2. If not, how is it possible to load the plugin file on the one component that's going to use it?

Any assistance would be much appreciated.

UPDATE

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

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

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

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

来源：https://stackoverflow.com/questions/48765295/angular-is-it-possible-to-load-a-jquery-plugin-for-one-component