[英]How to load a 3rd party script from web dynamically into Angular2 component
我正在嘗試從Web加載第三方腳本,而不是對其進行本地復制,並且能夠在腳本加載后使用第三方腳本的全局變量和函數。
更新 :
問題:以下組件無法從Web加載腳本
import {Component} from '@angular/core' @Component({ selector: 'custom', providers: [], template: ` <div> <h2>{{name}}</h2> <img class="v-button" role="button" alt="Visa Checkout" src="https://sandbox.secure.checkout.visa.com/wallet-services-web/xo/button.png"> <script src="https://sandbox-assets.secure.checkout.visa.com/checkout-widget/resources/js/integration/v1/sdk.js"> </script> </div> ` }) export class CustomComponent { constructor() { this.name = 'Custom Component works!!' } }
您可以使用此技術在Angular 2/4項目中按需動態加載JS腳本和庫。
在script.store.ts中創建ScriptStore
,它將包含本地或遠程服務器上腳本的路徑以及將用於動態加載腳本的名稱 :
interface Scripts {
name: string;
src: string;
}
export const ScriptStore: Scripts[] = [
{name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'},
{name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'}
];
創建script.service.ts以提供ScriptService
作為可注入服務,該服務將處理腳本文件的加載。 包含以下代碼:
import {Injectable} from "@angular/core";
import {ScriptStore} from "./script.store";
declare var document: any;
@Injectable()
export class ScriptService {
private scripts: any = {};
constructor() {
ScriptStore.forEach((script: any) => {
this.scripts[script.name] = {
loaded: false,
src: script.src
};
});
}
load(...scripts: string[]) {
var promises: any[] = [];
scripts.forEach((script) => promises.push(this.loadScript(script)));
return Promise.all(promises);
}
loadScript(name: string) {
return new Promise((resolve, reject) => {
//resolve if already loaded
if (this.scripts[name].loaded) {
resolve({script: name, loaded: true, status: 'Already Loaded'});
}
else {
//load script
let script = document.createElement('script');
script.type = 'text/javascript';
script.src = this.scripts[name].src;
if (script.readyState) { //IE
script.onreadystatechange = () => {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
}
};
} else { //Others
script.onload = () => {
this.scripts[name].loaded = true;
resolve({script: name, loaded: true, status: 'Loaded'});
};
}
script.onerror = (error: any) => resolve({script: name, loaded: false, status: 'Loaded'});
document.getElementsByTagName('head')[0].appendChild(script);
}
});
}
}
在需要的地方注入ScriptService
並加載如下腳本:
constructor(
private scriptService: ScriptService
) { }
ngOnInit() {
this.scriptService.load('filepicker', 'rangeSlider').then(data => {
console.log('script loaded ', data);
}).catch(error => console.log(error));
}
有兩種方法可以實現。
.d.ts
結尾,並且基本上是腳本功能的接口。 如果沒有預定義的類型定義文件,則可以使用所需的功能自己創建一個。 (我更喜歡這種方法,因為某些IDE會在智能感知中為您提供方法簽名) any
; 使用AutoMapperTS的示例:
類型定義:
/// <reference path="../node_modules/automapper-ts/dist/automapper.d.ts" />
@Component({
selector: "my-app",
})
export class AppComponent {
constructor() {
automapper.map("JSON", "myType", jsonObj);
}
}
(此示例中的引用可能會有所不同,具體取決於您的編輯器。此示例使用的是Visual Studio。嘗試將要引用的文件拖到編輯器窗口中,以查看IDE是否會為您創建引用。)
宣言:
declare var automapper: any;
@Component({
selector: "my-app",
})
export class AppComponent {
constructor() {
automapper.map("JSON", "myType", jsonObj);
}
}
可以使用標准<script>
標簽導入來加載第三方JS文件。 以上方法適用於TS編譯器,因此不會因未知變量異常而失敗。
我修改了Rahul Kumar的答案,以便它改用Observables:
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Observable";
import { Observer } from "rxjs/Observer";
@Injectable()
export class ScriptLoaderService {
private scripts: {ScriptModel}[] = [];
public load(script: ScriptModel): Observable<ScriptModel> {
return new Observable<ScriptModel>((observer: Observer<ScriptModel>) => {
var existingScript = this.scripts.find(s => s.name == script.name);
// Complete if already loaded
if (existingScript && existingScript.loaded) {
observer.next(existingScript);
observer.complete();
}
else {
// Add the script
this.scripts = [...this.scripts, script];
// Load the script
let scriptElement = document.createElement("script");
scriptElement.type = "text/javascript";
scriptElement.src = script.src;
scriptElement.onload = () => {
script.loaded = true;
observer.next(script);
observer.complete();
};
scriptElement.onerror = (error: any) => {
observer.error("Couldn't load script " + script.src);
};
document.getElementsByTagName('body')[0].appendChild(scriptElement);
}
});
}
}
export interface ScriptModel {
name: string,
src: string,
loaded: boolean
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.