Bagaimana untuk Memuatkan Fail JavaScript Luaran Secara Dinamik dalam Sudut?

Cara Memuatkan Skrip Luaran secara Dinamik dalam Sudut

Seperti yang anda sedia maklum, ciri import ES6 yang digunakan dalam Sudut adalah statik dan diselesaikan semasa Penyusunan TypeScript. Untuk memuatkan skrip secara dinamik berdasarkan konfigurasi, anda boleh menggunakan teknik berikut.

Dalam script.store.ts, tentukan tatasusunan objek fail JavaScript yang mengandungi nama dan laluan skrip:

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 akan mengendalikan logik pemuatan skrip:

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

}

Suntikan ScriptService dan gunakannya untuk memuatkan skrip secara dinamik:

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

Teknik ini membolehkan anda memuatkan skrip secara dinamik berdasarkan konfigurasi anda, sama ada daripada CDN atau laluan fail setempat.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Fail JavaScript Luaran Secara Dinamik dalam Sudut?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!