我有这个模块，它将外部库与额外的逻辑组件化，而不直接将<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动态加载脚本?
当前回答
@d123546 我遇到了同样的问题，现在使用ngAfterContentInit(生命周期钩子)在组件中工作，就像这样:
import { Component, OnInit, AfterContentInit } from '@angular/core';
import { Router } from '@angular/router';
import { ScriptService } from '../../script.service';
@Component({
selector: 'app-players-list',
templateUrl: './players-list.component.html',
styleUrls: ['./players-list.component.css'],
providers: [ ScriptService ]
})
export class PlayersListComponent implements OnInit, AfterContentInit {
constructor(private router: Router, private script: ScriptService) {
}
ngOnInit() {
}
ngAfterContentInit() {
this.script.load('filepicker', 'rangeSlider').then(data => {
console.log('script loaded ', data);
}).catch(error => console.log(error));
}
其他回答
在我的例子中，我使用上述技术加载了js和css visjs文件-这非常有效。我从ngOnInit()中调用新函数
注意:我不能通过简单地添加一个<script>和<link>标签到html模板文件来加载它。
loadVisJsScript() { console.log('Loading visjs js/css files...'); let script = document.createElement('script'); script.src = "../../assets/vis/vis.min.js"; script.type = 'text/javascript'; script.async = true; script.charset = 'utf-8'; document.getElementsByTagName('head')[0].appendChild(script); let link = document.createElement("link"); link.type = "stylesheet"; link.href = "../../assets/vis/vis.min.css"; document.getElementsByTagName('head')[0].appendChild(link); }
如果你正在使用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();
});
}
}
Angular的通用解决方案;在加载播放视频的脚本之前，我需要等待页面上的特定元素。
import {Inject, Injectable, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from "@angular/common";
@Injectable({
providedIn: 'root'
})
export class ScriptLoaderService {
constructor(
@Inject(PLATFORM_ID) private platformId: Object,
) {
}
load(scriptUrl: string) {
if (isPlatformBrowser(this.platformId)) {
let node: any = document.createElement('script');
node.src = scriptUrl;
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
@ rahull -kumar的解决方案对我来说很好，但我想在我的typescript中调用我的javascript函数
foo.myFunctions() // works in browser console, but foo can't be used in typescript file
我通过在我的typescript中声明它来修复它:
import { Component } from '@angular/core';
import { ScriptService } from './script.service';
declare var foo;
现在，我可以在typcript文件的任何地方调用foo
