Angular：如何在所有组件中跨应用程序加载外部脚本答案

【问题标题】：Angular: How to load external scripts across the application in all the componentsAngular：如何在所有组件中跨应用程序加载外部脚本
【发布时间】：2019-10-09 01:01:06
【问题描述】：

脚本标签：

<script src="https://www.test.com/dem0.js"></script>
<script src="https://www.test.com/dem01.js"></script>
<script src="https://www.test.com/dem02.js"></script>
<script src="https://www.test.com/dem03.js"></script>

索引.html：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Mobile</title>
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="wsstitle" content="catalog">
  <meta name="wssmlc" content="/us/en/">

  <link rel="icon" type="image/png" href="favicon.ico" sizes="32x32">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i" rel="stylesheet">
</head>

<body>
  <app-root></app-root>
</body>

</html>

我几乎没有外部<script> 标签，我想让它们在整个应用程序中可用（应该能够在浏览器中更改视图时加载它们）。如果我将它们包含在我的 index.html <head> 标记中，它只会在应用程序最初加载时第一次工作，但对于我的情况，我必须在视图更改时加载它们。在<body> 标签中包含脚本将是一个好习惯？？

【问题讨论】：

不确定我是否理解您的问题。这些脚本标签的来源是什么？如果这些是您希望在整个应用程序中提供的一些外部脚本，您可以将它们包含在 index.html
是的，这些是外部脚本，我想让它们在整个应用程序中可用。如果我将它们包含在 index.html 头中，它只会在应用程序最初加载时起作用。
您需要将您对其他库的访问权限封装在一个类中，例如：Jquery。然后那个类你需要把它集成到角管线ngOnInit、ngOnchange等等
一切都取决于你想要的行为
如果您参考任何示例或文档@CarlosE 会很棒

标签： angular typescript

【解决方案1】：

在angular-cli.json下添加脚本引用路径

     "scripts": [
       "../src/assets/scripts/asn1.min.js"
      ],

在组件 .ts 文件中使用它

声明 var libraryName: any;

【讨论】：

更新了我的问题，这些是外部标签，而不是来自本地。
外链也可以这样引用。
如果您参考任何示例或示例 sn-p 会很棒
@ramakrishna-rk 您是否测试了可能的解决方案？
请查看此链接。 stackoverflow.com/questions/34489916/…

【解决方案2】：

这里有一些例子展示了如何从外部资源集成 Jquery 和角度加载 jquery：https://stackblitz.com/edit/angular-e1nf7j

示例中还有其他代码来演示 Angular 代码和 Jquery 的一点分离。您可以创建一个 Wrapper 类来使用您的库编写您需要的任何内容

另一部分是控制你的组件生命周期。 Hooks 将完成执行您的外部代码的工作。

注意：您需要控制加载外部库所需的时间，以便没有空引用，因为 setTimeout()

希望对你有帮助

【讨论】：