Wie lade ich externe JavaScript-Dateien dynamisch in Angular?

So laden Sie externe Skripte dynamisch in Angular

Wie Sie wissen, ist die in Angular verwendete ES6-Importfunktion statisch und wird währenddessen aufgelöst TypeScript-Kompilierung. Um Skripte dynamisch basierend auf einer Konfiguration zu laden, können Sie die folgende Technik anwenden.

Definieren Sie in script.store.ts ein Array von JavaScript-Dateiobjekten, die den Skriptnamen und -pfad enthalten:

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 übernimmt die Skriptladelogik:

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);
        }
    });
}

}

Injizieren Sie den ScriptService und verwenden Sie ihn zum Laden von Skripten dynamisch:

this.script.load('filepicker', 'rangeSlider').then(data => {
    console.log('script loaded ', data);
}).catch(error => console.log(error));

Mit dieser Technik können Sie Skripte basierend auf Ihrer Konfiguration dynamisch laden, entweder von einem CDN oder einem lokalen Dateipfad.

Das obige ist der detaillierte Inhalt vonWie lade ich externe JavaScript-Dateien dynamisch in Angular?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!