我正在寻找一种方法来访问我包含在 assets/data 文件夹中的外部 js 文件中的变量
下面是我尝试过的
将 test.js 放在 assets/data 文件夹
在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);
result is error : ERROR ReferenceError: testvar is not defined
那么，我如何在 typescript 中使用我的 js 变量？
【问题讨论】：
标签： angular typescript ionic2 ionic3
以上解决方案都不适合我，在第一个解决方案中，在加载应用程序时加载 js 文件，当您有批量 js 文件时，这不是完美的解决方案。
我正在寻找加载外部库的动态解决方案，并且有用于加载异步 JavaScript 文件的库。 https://www.npmjs.com/package/scriptjs
安装包：
npm i scriptjs
然后在下面的任何地方使用它：
import { get } from 'scriptjs';
ngOnInit() {
get("assets/js/searchEmp.js", () => {
getSerchInspContext = this;
loadSearchEmp();
});}
或
您可以简单地使用 jquery 方法在标题中附加或删除脚本标记。
要添加 .js 文件，请在 ngOnInit() 下调用以下行：
$('head').append('<script async src="assets/js/search.js"></script>');
删除 .js 文件：
document.querySelector('script[src="assets/js/search.js"]').remove();
【讨论】：
从 index.html 中删除它并像这样使用它：
import '../assets/data/test';
【讨论】：
这是在 ionic 3.20.0 上适用于我的解决方案：
创建此文件 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
在 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;
现在在 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 的链接。
【讨论】：
这个解决方案只对我有用
将导入的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 中声明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);
...
【讨论】：
扩展 misha130 的答案。你需要像这样将它导入到你想要的文件中：
import * as test from '../assets/data/test'
这样你就可以访问测试变量了。
console.log(test.testvar);
【讨论】：