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

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

我做了以下事情

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

问题

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

任何援助将不胜感激。

UPDATE

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

‘$（ “＃myCanvas”）注释（选件）;’

[ts]属性’annotate’在’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(""); }); 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); }