html - Angular 应用程序 - 在哪里放置脚本标签

Question

我正在尝试将付款集成到我的 Angular 应用程序中，两个提供商(Paypal 和 Adyen)都为您提供了一个托管在其网页上的 js 文件，他们建议将其放入 HTML 中。像这样的事情:

<script src="https://www.paypalobjects.com/api/checkout.js"></script>

没有可以像任何其他 js 一样导入的 npm 包。

因此，据我了解，不允许您输入 <script>在 Angular 组件本身中，但我不喜欢把它放在 index.html 中，因为它将“在应用程序负载上加载，从而增加应用程序的加载时间，而仅在与支付相关的少数组件中需要它，并且可以稍后加载。谢谢。

有什么想法吗？

Answer 1

如果您使用 Angular CLI，则您有一个 .angular-cli.json 文件，您可以在其中插入自定义脚本。您可以将自定义脚本插入到“scripts”属性中，该属性采用文件的相对路径数组。例如你可以这样做:

"scripts": [
    "js/someScript.js",
    "js/anotherScript.js"
]

您也不必担心这些文件的缩小。 Webpack 会为你做到这一点。

如果您希望动态加载一些外部 js 文件而不加载 bundle 中的所有内容，您可以在 component.ts 中这样做。 AS answer 中指定.

loadScripts() {
    const dynamicScripts = [
   'https://platform.twitter.com/widgets.js',
   '../../../assets/js/dummyjs.min.js'
  ];
  for (let i = 0; i < dynamicScripts.length; i++) {
    const node = document.createElement('script');
    node.src = dynamicScripts[i];
    node.type = 'text/javascript';
    node.async = false;
    node.charset = 'utf-8';
    document.getElementsByTagName('head')[0].appendChild(node);
  }
}

并在构造函数中。

constructor() {
  this.loadScripts();
}

但就 SPA 方式而言，一开始加载所有内容都没有问题，因为在初始加载之后，它们将不再加载。