我有这个模块，它将外部库与额外的逻辑组件化，而不直接将<script>标记添加到index.html中:
import 'http://external.com/path/file.js'
//import '../js/file.js'
@Component({
selector: 'my-app',
template: `
<script src="http://iknow.com/this/does/not/work/either/file.js"></script>
<div>Template</div>`
})
export class MyAppComponent {...}
我注意到ES6规范的导入是静态的，并且是在TypeScript编译期间解析的，而不是在运行时。
总之，让它变得可配置，这样file。js就会从CDN或本地文件夹加载? 如何告诉Angular 2动态加载脚本?
当前回答
我已经用新的渲染器api完成了这个代码片段
constructor(private renderer: Renderer2){}
addJsToElement(src: string): HTMLScriptElement {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
this.renderer.appendChild(document.body, script);
return script;
}
然后像这样叫它
this.addJsToElement('https://widgets.skyscanner.net/widget-server/js/loader.js').onload = () => {
console.log('SkyScanner Tag loaded');
}
堆栈闪电战
其他回答
如果你正在使用system.js，你可以在运行时使用System.import():
export class MyAppComponent {
constructor(){
System.import('path/to/your/module').then(refToLoadedModule => {
refToLoadedModule.someFunction();
}
);
}
如果你正在使用webpack，你可以充分利用它强大的代码分割支持。确保:
export class MyAppComponent {
constructor() {
require.ensure(['path/to/your/module'], require => {
let yourModule = require('path/to/your/module');
yourModule.someFunction();
});
}
}
对于下面的链接，我也有同样的问题。我用一种很简单的方法解决了它。
https://www.gstatic.com/charts/loader.js
我需要访问下面代码中的谷歌变量。但当我把它放到angular类中时，它就不起作用了。
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
["Copper", 8.94, "dodgerblue"],
["Silver", 10.49, "dodgerblue"],
["Gold", 19.30, "dodgerblue"],
["Platinum", 21.45, "color: dodgerblue"]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation" },
2]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
width: 600,
height: 400,
bar: {groupWidth: "50%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
我在ts类的顶部创建了一个具有相同名称的全局变量(谷歌)，然后该变量自动引用所需的变量。(因为它是全局作用域)那么问题就解决了。
declare var google: any;
这可能有用。这段代码动态地将<script>标记附加到单击按钮时的html文件头部。
const url = 'http://iknow.com/this/does/not/work/either/file.js';
export class MyAppComponent {
loadAPI: Promise<any>;
public buttonClicked() {
this.loadAPI = new Promise((resolve) => {
console.log('resolving promise...');
this.loadScript();
});
}
public loadScript() {
console.log('preparing to load...')
let node = document.createElement('script');
node.src = url;
node.type = 'text/javascript';
node.async = true;
node.charset = 'utf-8';
document.getElementsByTagName('head')[0].appendChild(node);
}
}
还有一种选择是利用scriptjs包来解决这个问题
允许您按需从任何URL加载脚本资源
例子
安装包:
npm i scriptjs
以及scriptjs的类型定义:
npm install --save @types/scriptjs
然后导入$script.get()方法:
import { get } from 'scriptjs';
最后加载脚本资源，在我们的例子中是谷歌Maps库:
export class AppComponent implements OnInit {
ngOnInit() {
get("https://maps.googleapis.com/maps/api/js?key=", () => {
//Google Maps library has been loaded...
});
}
}
Demo
这个解决方案对我很有效:
1)创建一个名为URLLoader的新类
export class URLLoader {
constructor() {
}
loadScripts() {
const dynamicScripts = [
'URL 1',
'URL 2',
'URL n'
];
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('app-root')[0].appendChild(node);
}
}
}
2)扩展类URLLoader并从组件类中调用loadScripts方法
export class AppComponent extends URLLoader implements OnInit {
constructor(){}
ngOnInit() {
super.loadScripts();
}
}
