1
votes

Comment inclure le script externe uniquement dans le composant?

J'ai une application angulaire J'ai un composant form qui dépend d'un script externe pour fonctionner correctement,

Je sais que pour inclure le script externe dans l'angulaire, nous pouvons faire l'une des choses suivantes: -

créer une entrée dans le fichier angular.json
inclure le script dans index.html
inclure le fichier de script dans le fichier component.html
importer le script dans le fichier component.ts

Toutes les méthodes ci-dessus incluent le script globalement, et cela ne fonctionne pas lorsque le composant n'est pas chargé.

Je veux que le script attaché au composant s'exécute à chaque fois qu'il est chargé / acheminé. tout le CSS fonctionne correctement.

Existe-t-il un moyen de rendre le script externe local au composant et de le réexécuter à chaque fois qu'il est chargé?

typescript angular

1 commentaires

Il y a cette question de savoir comment charger de manière dynamique un script en angulaire stackoverflow.com/questions/34489916/...

4 Réponses :

-1
votes

Vous pouvez essayer ngZone et exécuter votre script hors angular

0 commentaires

3
votes

Cela ressemble à un cas pour les expressions d'importation dynamiques . Ils ressemblent à ceci (citant l'article):

import("./widget").then(widget => {
    widget.render(container);
});

renderWidget();

0 commentaires

-1
votes

Essayez de regarder cela , le gars a décrit comment télécharger dynamiquement le module (fichier js) et l'utiliser, donc vous pouvez faire de même depuis, par exemple, ngOnInit ou ngAfterViewInit hook dans votre composant.

0 commentaires

0
votes

Un échantillon est créé à https://stackblitz.com/edit/angular-hadyfy qui décrit comment l'exécution du script peut être inclus uniquement à un composant souhaité (composant c1 dans l'exemple).

Faites-moi savoir si cela résout votre question.

Essentiellement, l'idée ici est de revenir aux bases du chargement d'un élément de script enfant dans document ==> élément head.

    ngAfterViewInit() {
let url = "assets/c1.js";  //external script url
let head = document.getElementsByTagName("head")[0];
let scrs = head.getElementsByTagName("script");
for(let i=0;i<scrs.length; i++){     
  let scr = scrs[i];

  if(scr.outerHTML.indexOf(url) >0){
    head.removeChild(scr);
  }
}
    let script = document.createElement("script");
    script.src = url;
    script.type ="text/javascript";
    script.async = true;
    script.defer = true;
    head.appendChild(script);

}

0 commentaires