如何在 Angular 6 中导入 js 文件。 我试图实现一个导航栏，它包含 js 函数。 谢谢！！！
我添加我的名为 nav.js 的 js 文件
"scripts": [
"src/assets/js/nav.js"
]
【问题讨论】：
标签： javascript angular file import
如果您能掌握脚本中的功能，我建议一些解决方法。 因此，您可以将它们作为函数放入您的 component.ts 代码中，或者如果您不能/不想这样做，则只需导出/导入它们。例如
myscript.js
function a(){ ...}
function b(){...}
module.exports.a=a
module.exports.b=b
mycomponent.component.ts
..
import a from './path/../myscript.js';
import b from './path/../myscript.js';
..
constructor(){
...
a.a()
b.b()
...
}
ps：很多时候你会发现函数是匿名的，所以你只需要重命名它们， 例如
myscript.js
函数(){..}();
将是
myscript.js
function myCustomName(){..};
module.exports.customName=myCustomName
【讨论】：
首先，您应该使用 npm 安装您的库。然后将库添加到项目中的 node_modules 文件夹中。
现在：
如果你想将js文件导入到angular项目中，首先你应该检查angular的版本，如果你使用的是版本2和4，你应该这样写：
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
如果你使用高于 4 的版本，比如 5,6 或 7，你应该这样写：
"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
在这个例子中，我将 jquery 导入到 angular 项目中。我希望，它有效
【讨论】：
Angular 6 有一个专门的地方来声明 js 文件 在 angular.json 的专用数组中， 下
/projects/$(youProjectName)/architect/build/options/scripts[]
和
/projects/$(youProjectName)/architect/test/options/scripts[]
举个例子：
npm install fast-levenshtein --save
会在node-modules下安装一个js库
js lib文件相对于项目的路径声明如下：
"scripts": [
"node_modules/fast-levenshtein/levenshtein.js"
]
然后在你的组件中声明要使用的变量， 如 npm 文档或 @LuaXD 所述
【讨论】：
您应该包含在 index.html 中，例如：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>A random project</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<link rel="stylesheet" href="https://cartodb-
libs.global.ssl.fastly.net/cartodb.js/v3/3.15/themes/css/cartodb.css"
/>
<script src="https://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/3.15/cartodb.core.js"></script>
<app-root></app-root>
</body>
</html>
在这种情况下，我包含了 cartodb.js 库，然后在我使用的任何组件或服务上使用 cartodb.js：
declare var cartodb: any;
在任何文件（组件、服务等）的开头。
注意将 cartodb 更改为您将使用的库的名称，例如 jquery 为：
declare var jquery:any;
declare var $ :any;
你应该有这样的东西：
import { Injectable } from '@angular/core';
// Other imports...
declare var cartodb: any;
@Injectable()
export class ARandomService {
}
P.s 如果你要使用的代码在 npm 中不存在，请搜索。
【讨论】：