我有一个问题，我需要使用特定的 3rd 方库来生成随机数以使用 square connect api。我很难找到如何加载外部 javascript 库，因为它们没有我可以像往常一样加载的 node_module。通过外部库，我的意思是像 <script src="https://js.squareup.com/v2/paymentform " type="text/javascript"> 这样的东西我还没有找到一个很好的方法来将它加载到我的应用程序中以便我可以使用它。关于如何解决这个问题的任何想法？
【问题讨论】：
标签： javascript angular square-connect
我使用过的几个选项：
使用angular-cli的全局脚本
"scripts": [
"global-script.js",
{ "input": "lazy-script.js", "lazy": true },
{ "input": "pre-rename-script.js", "output": "renamed-script" },
]
在特定模块中需要
import { NgModule } from '@angular/core';
...
require('chart.js');
require('../../libs/chartjs-plugin-annotation');
...
在运行时根据某些条件添加一个全局脚本
if (this.usesCKEditor(permissions) && !window['CKEDITOR']) {
const url = '//cdn.ckeditor.com/4.7.3/full/ckeditor.js';
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.body.appendChild(script);
}
// must check if the script has loaded before using it
【讨论】：
第一种方法：
参考angular-cli.json 文件中的脚本。
"scripts": [
"../path"
];
第二种方法
您可以创建自己的指令来加载脚本，如下所示
import { Directive, OnInit, Input } from '@angular/core';
@Directive({
selector: '[appLoadScript]'
})
export class LoadScriptDirective implements OnInit{
@Input('script') param: any;
ngOnInit() {
let node = document.createElement('script');
node.src = this.param;
node.type = 'text/javascript';
node.async = false;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
如何使用
<i appLoadScript [script]="'https://js.squareup.com/v2/paymentform'"></i>
【讨论】：