在Angular 4中导入外部js文件并访问函数和变量

Question

也许我的标题有点不清楚，所以我会用一个简单的任务来解释我的问题。

假设我有以下Javascript文件＆＃34; file.js＆＃34;：

var number = 4;

function encode(){
  console.log("encode in "file.js" has been called...");
} 

我将此脚本放在＆＃34; src / assets / js / file.js＆＃34;中的angular4项目中。

In＆＃34; .angular-cli.json＆＃34;我添加了脚本的路径

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "./assets/js/modernizr.js",
  "./assets/js/webflow.js",
  "./assets/js/file.js"

现在我的问题是如何在我的app.module.ts或任何其他组件中导入或使用此脚本文件，而无需将其添加到index.html

我试过几种方法：

import * as test from 'assets/js/file.js';
import {test} from 'assets/js/file.js';
declare var file: any;

不幸的是，没有人工作......

我真的很感激，如果你们能帮助我的话。

Answer 1

您可以使用 system.js 在运行时导入文件，如下所示，您必须在node_modules中添加systemjs。

System.import("src/assets/js/file.js").then(fileInstance => {
      console.log(fileInstance);
});

Answer 2

您可以将js本地导入ts文件：import'../../../ scripts / custom.js';

然后在custom.js中声明要使用的方法名称，例如? 声明var fAlert; 然后在ngOnInit这样的地方直接使用此方法

fAlert（）;