web-dev-qa-db-fra.com

Comment appeler une fonction de script Java externe dans angular 5?

J'ai téléchargé un thème de this link. Je dois définir le script et CSS dans le fichier index.html.

index.html (section du corps)

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/main.85741bff.js"></script>
  <script type="text/javascript" src="./assets/js/common.js"></script>
</body>

J'ai défini ma fonction dans common.js et je l'ai appelée à partir du fichier main.85741bff.js.

common.js (fonction)

document.addEventListener("DOMContentLoaded", function (event) {
     masonryBuild();
     navbarToggleSidebar();
     navActivePage();
});

Le problème est que je peux appeler la fonction pendant le rechargement de la page, mais je ne peux pas l'appeler pendant le chargement du contenu.

Quelqu'un peut-il m'aider à résoudre ce problème? Toute aide serait appréciée.

javascriptangulartypescriptangular5
3
Milan

Vous pouvez utiliser javascript dans l'application Angular.

Étape 1. Créez le fichier demo.js dans le dossier assets/javascript .

export function test1(){
    console.log('Calling test 1 function');
}

Étape 2. Créez le fichier demo.d.ts dans le dossier assets/javascript .

export declare function test1();

Étape 3. Utilisez-le dans votre composant

import { test1 } from '../assets/javascript/demo'; 
 @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(test1());
  }
}

Remarque: les noms de fichier js et .d.ts doivent être identiques

9
Akshay Garg

Dans Angular4, le dossier de projet 5 contient le fichier .angular-cli.json.

En fichier, vous verrez 

"apps": [
  {
    "scripts": []
  }
]

Poussez votre chemin de fichier js externe dans le tableau.

0
Songwon Park

Vous devez modifier l'ordre dans lequel vous chargez vos fichiers JavaSciprt. Essayez de charger common.js avant main......js. Votre script tente d'accéder à une fonction à partir d'un fichier qui n'a pas encore été chargé. Essayez simplement de changer ces deux lignes de code: 

<body>
  <app-root></app-root>
  <script type="text/javascript" src="./assets/js/common.js"></script>
  <script type="text/javascript" src="./assets/js/main.85741bff.js">/script>
</body>
0
VTodorov