代码之家 › 专栏 › 技术社区 › eddyP23

角度应用程序-在何处放置脚本标记

angular html

2

eddyP23 · 技术社区 · 8 年前

我正在尝试将支付集成到我的角度应用程序中,两个提供商(Paypal和Adyen)都会在他们的网页上提供一个js文件,他们建议将其放入HTML中。像这样的:

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

没有npm包可以作为js的任何其他部分导入。

所以据我所知,你不能 <script> 但我不喜欢把它放在 index.html ,因为它将加载到应用程序加载中,从而增加应用程序的加载时间,而它只需要在与支付相关的几个组件中使用,并且可以在稍后加载。谢谢。

有什么想法吗?

1 回复 | 直到 8 年前

1

2

Gregor Ojstersek 8 年前

如果使用的是Angular CLI,则有一个.Angular-CLI.json文件,可以在其中插入自定义脚本。可以将自定义脚本插入“scripts”属性,该属性接受文件的相对路径数组。例如,您可以执行以下操作:

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

你也不必担心那些文件的缩小。Webpack为你做的。

如果您希望动态加载一些外部js文件,而不想加载包中的所有内容,那么您可以在component.ts中这样做 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的方式而言,在一开始加载所有东西都没有问题,因为在初始加载之后,它们将不再加载。