Comment puis-je charger dynamiquement des scripts externes dans Angular ?

Chargement dynamique de scripts externes dans Angular

Le chargement dynamique de scripts externes permet aux applications Angular de différer le chargement de bibliothèques tierces jusqu'à ce qu'elles soient réellement nécessaire, améliorant ainsi les performances et la flexibilité. Cependant, le mécanisme d'importation standard ES6 est statique et se produit lors de la transpilation, ce qui le rend inadapté à cette fin.

Solution :

Pour charger dynamiquement des scripts externes, nous pouvons utiliser un service personnalisé qui gère le chargement des scripts. L'un de ces services utilise l'approche suivante :

1. Créer un magasin de scripts :

Définissez un tableau d'objets contenant chacun le nom et le chemin source d'un script :

const ScriptStore: Scripts[] = [
    {name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js'},
    {name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js'}
];

2. Implémenter un service de script :

Créez un service qui fournit des méthodes de chargement de scripts :

@Injectable()
export class ScriptService {

    private scripts: any = {};

    constructor() {
        ScriptStore.forEach((script) => {
            this.scripts[script.name] = {
                loaded: false,
                src: script.src
            };
        });
    }

    load(...scripts: string[]) {
        // Load multiple scripts in parallel
    }

    loadScript(name: string) {
        // Load a single script
    }
}

3. Charger dynamiquement les scripts :

Injectez le ScriptService là où cela est nécessaire et invoquez load() pour charger dynamiquement les scripts :

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

Dans cette approche, les scripts sont chargés dynamiquement pendant l'exécution, fournissant ainsi flexibilité et contrôle sur le chargement des bibliothèques externes dans les applications angulaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!