web-dev-qa-db-ja.com

ionic 3にJSファイルを含める方法

アセット/データフォルダーに含まれている外部jsファイルから変数にアクセスする方法を探しています

以下は私が試したものです

test.js in assets/data folderに配置

in test.js変数testvar = "heloo from external js";を追加

src/index.htmlにスクリプトタグを追加しました<script src="assets/data/test.js"></script>

app.component.tsで、インポート後にこの行を追加しました; declare var testvar: any;

コンストラクターに値console.log(testvar);を記録するためにこの行を追加しました

結果はerror：ERROR ReferenceError：testvar is not defined

だから、TypeScriptでjs変数をどのように使用できますか？

angulartypescriptionic2ionic3
18
rashidnk

このソリューションは私のためだけに働いた

Import jsをsrc/index.htmlおよびbuild/polyfills.jsの前のbuild/main.jsヘッダータグに入れます（これらはbodyタグにあります）。

例：src/assets/test.jsでファイルvar testvarを作成し、src/index.htmlにインポートしてから、src/app/app.component.tsで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);
...
32
rashidnk

Misha130の答えを拡大する。次のように、必要なファイルにインポートする必要があります。

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

これにより、テスト変数にアクセスできます。

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

Index.htmlから削除して、次のように使用します。

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

これは、ionic 3.20.0で動作するソリューションです。

  1. このファイルsrc/assets/data/test.jsを作成します。このファイルでこれらの変数を宣言します：

    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. App.component.tsで、次の行を追加してjavascriptファイルをインポートし、変数を宣言します。

    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. App.component.tsで、次のような変数にアクセスできます。

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

最後の言葉：上記のようにしている場合、src/index.htmlにtest.jsへのリンクを追加する必要はありません。

0
tala9999