Javascript 如何以角度 6 导入 JS 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50649194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How Import JS File in angular 6?
提问by George
how can I import a js file in angular 6. I tried to implement a navbar and it contains js functions. thanks!!!
如何在 angular 6 中导入 js 文件。我尝试实现一个导航栏，它包含 js 函数。谢谢！！！
I Add my js file called nav.js
我添加名为 nav.js 的 js 文件
"scripts": [
"src/assets/js/nav.js"
]
回答by LuaXD
You should include on index.html, e.g:
您应该在 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>
On this case I included cartodb.js library, then for use cartodb.js on any component, or service I use:
在这种情况下，我包含了 cartodb.js 库，然后在我使用的任何组件或服务上使用 cartodb.js：
declare var cartodb: any;
At the beginning of any file (Component, Service, etc).
在任何文件（组件、服务等）的开头。
Note change cartodb by the name of the library you will use, for example for jquery is:
注意根据您将使用的库的名称更改 cartodb，例如 jquery 是：
declare var jquery:any;
declare var $ :any;
You should have something like this:
你应该有这样的事情：
import { Injectable } from '@angular/core';
// Other imports...
declare var cartodb: any;
@Injectable()
export class ARandomService {
}
P.s Search if the code you want to use doesn't exist in npm.
Ps 如果你要使用的代码在npm 中不存在，请搜索。
回答by user1767316
Angular 6 has a dedicated place to declare js files within the dedicated arrays of your angular.json, under
Angular 6 有一个专门的地方来在你的 angular.json 的专用数组中声明 js 文件，在
/projects/$(youProjectName)/architect/build/options/scripts[]
and
和
/projects/$(youProjectName)/architect/test/options/scripts[]
As an example:
举个例子：
npm install fast-levenshtein --save
will install a js library under node-modules
将在 node-modules 下安装一个 js 库
The path relative to the project of the js lib file is declared like this:
js lib文件相对于项目的路径声明如下：
"scripts": [
"node_modules/fast-levenshtein/levenshtein.js"
]
Then declare in your component the variable(s) to use, either as described by the npm documentation or by @LuaXD
然后在您的组件中声明要使用的变量，如 npm 文档或@LuaXD 所述
回答by Seyed-Amir-Mehrizi
first, you should install your library with npm. then the library is being added to your node_modules folder, in your project.
首先，您应该使用 npm 安装您的库。然后将该库添加到项目中的 node_modules 文件夹中。
now:
现在：
if you want to import js files into the angular project, first you should check the version of angular, if you are using version 2 and 4 , you should write like this :
如果你想将js文件导入到angular项目中，首先你应该检查angular的版本，如果你使用的是版本2和4，你应该这样写：
"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]
and if you are using version upper than 4, like 5,6 or 7 you should write like this :
如果您使用的版本高于 4，例如 5,6 或 7，您应该这样写：
"scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]
in this example i import jquery into the angular project. i hope, it works
在这个例子中，我将 jquery 导入到 angular 项目中。我希望，它有效
回答by Wael Chorfan
I suggest some workaround if you can grasp the functions within the script. So You either put them in your component.ts code as functions ,or if you can't/don't want to , you will just have to export/import them . for example
如果您可以掌握脚本中的功能，我建议一些解决方法。所以你要么把它们作为函数放在你的 component.ts 代码中，要么如果你不能/不想，你只需要导出/导入它们。例如
myscript.js
我的脚本.js
function a(){ ...}
function b(){...}
module.exports.a=a
module.exports.b=b
mycomponent.component.ts
mycomponent.component.ts
..
import a from './path/../myscript.js';
import b from './path/../myscript.js';
..
constructor(){
...
a.a()
b.b()
...
}
ps:many times you will find function anonymous so you just have to rename them , for example
ps：很多时候你会发现函数是匿名的，所以你只需要重命名它们，例如
myscript.js
我的脚本.js
function(){..}();
功能（）{..}（）;
will be
将会
myscript.js
我的脚本.js
function myCustomName(){..};
module.exports.customName=myCustomName
