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

Question

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

假设我有以下 Javascript 文件“file.js”：

var number = 4;

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

我将此脚本放在“src/assets/js/file.js”中的 angular4 项目中。

在“.angular-cli.json”中，我添加了脚本的路径

"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

在 component.ts 中，您应该声明要使用的函数的名称。

declare let encode:any 

ngOnInit(){
  encode()
}

Answer 3

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

然后在 custom.js 中声明你想要使用的方法名称 👍 声明 var fAlert; 然后在 ngOnInit 之类的地方直接使用这个方法

警报（）；