web-dev-qa-db-fra.com

Comment inclure un fichier JS dans ionic 3

Je cherche un moyen d'accéder à une variable à partir d'un fichier js externe que j'ai inclus dans le dossier assets/data

ci-dessous est ce que j'ai essayé

placétest.jsdans actifs/dossier de données

danstest.jsvariable ajoutée testvar = "heloo from external js";

balise de script ajoutée dans src/index.html<script src="assets/data/test.js"></script>

dans app.component.ts j'ai ajouté cette ligne après les importations; declare var testvar: any;

in constructor a ajouté cette ligne pour consigner la valeur console.log(testvar);

le résultat esterror:ERROR ReferenceError: la variable test n'est pas définie

alors, comment puis-je utiliser ma variable js dans TypeScript?

angulartypescriptionic2ionic3
17
rashidnk

Cette solution n'a fonctionné que pour moi

Placez le js d'importation dans la balise d'en-tête src/index.html, avant le build/polyfills.js et build/main.js (ils sont dans une balise body);

Exemple: J'ai créé un fichier src/assets/test.js avec un var testvar, importé dans src/index.html puis dans src/app/app.component.ts déclaré declare var testvar;.

test.js 

var testvar = "Hello from external js";

index.html 

...
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#4e8ef7">

  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
  <script src="assets/js/test.js"></script> //here, not in body
...

app.componet.ts 

declare var testvar;

@Component({
   templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;
  constructor(private statusbar : StatusBar,  splashScreen: SplashScreen) {
   alert(testvar);
...
29
rashidnk

Pour développer la réponse de misha130. Vous devez l’importer dans le fichier que vous voulez, comme ceci:

import * as test from '../assets/data/test'

De cette façon, vous avez accès à la variable de test.

console.log(test.testvar);
4
Logan Garland

Supprimez-le de index.html et utilisez-le comme ceci:

import '../assets/data/test';
1
misha130

C'est la solution qui fonctionne pour moi sur ionic 3.20.0:

  1. Créez ce fichier src/assets/data/test.js. Dans ce fichier, déclarez ces variables:

    testvar = "Hello from external js"; // notes: there is no var keywork testvar2 = "Hello from external js"; // notes: there is no var keywork var testvar3 = "Hello from external js"; // this will not work

  2. Dans app.component.ts, ajoutez ces lignes pour importer le fichier javascript et déclarer ses variables:

    import * as test from '../assets/data/test'; // check correct path declare var testvar: any; // each declaration should be on separate line declare var testvar2: any; declare var testvar3: any;

  3. Maintenant, dans app.component.ts, vous pouvez accéder à ces variables comme ceci:

    console.log(testvar); // not test.testvar console.log(testvar2); console.log(testvar3); // will be undefined because of the var keywork

Mots finaux: il n'est pas nécessaire d'ajouter un lien vers test.js dans src/index.html si nous procédons comme ci-dessus.

0
tala9999