Comment puis-je charger dynamiquement des scripts dans Angular à l'aide d'un service ?

Chargement dynamique de scripts dans Angular : une solution

Introduction :

Dans les applications angulaires, la nécessité d'inclure des scripts externes peut survenir. Cependant, l'ajout de <script> balises directement vers index.html et s'appuyer sur les instructions d'importation ES6 a des limites. Cet article présente une technique pour charger dynamiquement des scripts en fonction de la configuration de l'utilisateur, permettant aux développeurs de choisir entre des sources de scripts CDN ou locales.</script>

Chargement dynamique de scripts :

Pour charger dynamiquement scripts, nous pouvons utiliser les étapes suivantes :

1. Créer un script Store : Établissez un tableau d'objets appelé ScriptStore, qui contient des chemins de script et des noms uniques pour le chargement dynamique.
2. Injectez le service de script : Implémentez le ScriptService en tant que service angulaire injectable qui gère le chargement des scripts.
3. Méthode Load Scripts : Définissez une méthode de chargement dans ScriptService pour charger scripts de manière dynamique. Cette méthode prend les noms de script comme paramètres et renvoie une promesse.
4. Implémentation du script de chargement : Dans la méthode de chargement, vérifiez si le script est déjà chargé. Sinon, créez un <script> élément, spécifiez sa source et gérez les événements pour le chargement du script (par exemple, onload ou onreadystatechange).</script>
5. Injectez et invoquez le service : Injectez ScriptService dans le composant ou le service où vous devez charger scripts. Appelez la méthode de chargement pour charger les scripts souhaités.

Exemple de code :

Vous trouverez ci-dessous un exemple d'implémentation du magasin de scripts et du service :

interface Scripts {
  name: string;
  src: string;
}

// Script store with sample script definitions
export const ScriptStore: Scripts[] = [
  { name: 'filepicker', src: 'https://api.filestackapi.com/filestack.js' },
  { name: 'rangeSlider', src: '../../../assets/js/ion.rangeSlider.min.js' }
];

@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) => {
      // Check if script is already loaded
      if (this.scripts[name].loaded) {
        resolve({ script: name, loaded: true, status: 'Already Loaded' });
      } else {
        let script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = this.scripts[name].src;
        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);
      }
    });
  }
}

Utilisation :

Dans le composant ou le service où vous souhaitez charger scripts de manière dynamique, injectez le ScriptService. Ensuite, dans une méthode, invoquez la méthode de chargement comme ceci :

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

Dans cet exemple, les scripts filepicker et rangeSlider seront chargés dynamiquement. Vous pouvez désormais configurer le ScriptStore pour charger des scripts à partir d'un CDN ou d'un dossier local selon vos besoins.

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!