我有这个模块，它将外部库与额外的逻辑组件化，而不直接将<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动态加载脚本?
当前回答
Angular有防止用户直接干扰html输出的逻辑。所以你必须让Angular通过在Angular中给出那个方向来注入标签。json文件。
首先，您必须获取脚本文件。有两种方法:
下载脚本文件(例如。somelibrary.js)
把它放在资产文件夹中 把脚本的相对路径，放到angular的“scripts”部分。json文件:
"scripts": [
"src/assets/somelibrary.js"
]
使用npm/yarn安装脚本:
把脚本的相对路径，放到angular的“scripts”部分。json文件:
"scripts": [
"./node_modules/somelibrary/dist/somelibrary.min.js"
]
其他回答
在我的例子中，我使用上述技术加载了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); }
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);
}
}
}
@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));
}
这个解决方案对我很有效:
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();
}
}
我发现这个解决方案更干净，首先在你的模块中导入HttpClientJsonpModule，然后做这样的事情
this.apiLoaded = this.httpClient.jsonp(environment.AnyApiUrl, 'callback')
.pipe(
map(() => true),
catchError(() => of(false)),
);
在模板中:
<app-component *ngIf="apiLoaded | async"></app-component>
这个解决方案在Angular谷歌Maps的官方文档中。
