Angular 如何在ionic 3中包含JS文件

我正在寻找一种从外部js文件中访问变量的方法，该文件包含在assets/data文件夹中

下面是我试过的

将

test.js

放在资产/数据文件夹中

在

test.js

中添加了变量

testvar=“heloo from external js”

在
src/index.html中添加了脚本标记

在
app.component.ts
中，我在导入后添加了这一行<代码>声明var testvar:any

在中，构造函数添加了这一行来记录值
console.log（testvar）

结果是错误：错误引用错误：未定义testvar

那么，我如何在typescript中使用我的js变量呢？
将其从index.html中删除，并像这样使用它：

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

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

进一步阐述misha130的答案。您需要将其导入所需的文件，如下所示：

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

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

这样您就可以访问测试变量

console.log(test.testvar);

这个解决方案只对我有效

将import js放在
src/index.html
头标记中，在
build/polyfills.js
和
build/main.js
（它们位于body标签中）

示例：我用
var testvar
创建了一个文件
src/assets/test.js
，导入
src/index.html
，然后导入
src/app/app.component.ts
声明
声明var testvar

test.js

var testvar = "Hello from external js";

declare var testvar;

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

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
...

这是我在ionic 3.20.0上使用的解决方案：

创建这个文件src/assets/data/test.js。在此文件中声明以下变量：

testvar=“Hello from external js”；//注意：没有var密钥工作
testvar2=“Hello from external js”；//注意：没有var密钥工作
var testvar3=“Hello from external js”；//这将不起作用

在app.component.ts中，添加以下行以导入javascript文件并声明其变量：

import*作为测试从“../assets/data/test”；//检查路径是否正确
声明var testvar:any；//每个声明都应该在单独的行中
声明var testvar2:any；
声明var testvar3：任何

现在在app.component.ts中，您可以访问以下变量：

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

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

console.log（testvar）；//不是test.testvar
log（testvar2）；
console.log（testvar3）；//将由于var密钥工作而未定义

最后一句话：如果我们像上面那样做的话，就不需要在src/index.html中添加test.js的链接。
上述解决方案对我都不起作用，在应用程序加载时加载js文件的第一个解决方案中，当您有大容量js文件时，这不是完美的解决方案

我一直在寻找动态解决方案来加载外部库，还有一个库用于加载异步JavaScript文件

安装软件包：

npm i scriptjs

然后在任何地方使用它，如下所示：

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}

或

您可以简单地使用jquery方法在头中追加或删除脚本标记

要添加.js文件，请在ngOnInit（）下的下面一行调用：

错误消失了？但是如何访问varibale？console.log（testvar）；是未定义的测试现在是var，而不是TestVar您的答案不完整broI编辑了答案并删除了别名，因此现在可能不那么混乱了。您只需控制台LogTestVar即可，若要使其正常工作，请添加declare var testvar；如rashidnk所说，发送到app.componet.ts。然后可以像这样访问testvar:console.log（testvar）；注意，通过这种方式，不需要将test.js添加到index.htmlsome建议（如果不起作用）：在“declare var testvar”旁边添加：any。将allowJs:true添加到项目目录中的tsconfig.json。