Javascript 如何在angular 6中导入JS文件？_Javascript_Angular_File_Import

Javascript 如何在angular 6中导入JS文件？

javascript angular file import

Javascript 如何在angular 6中导入JS文件？,javascript,angular,file,import,Javascript,Angular,File,Import,如何在angular 6中导入js文件。我试图实现一个navbar，它包含js函数。谢谢我添加了名为nav.js的js文件 "scripts": [ "src/assets/js/nav.js" ] 您应该在index.html中包括，例如： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>

如何在angular 6中导入js文件。我试图实现一个navbar，它包含js函数。谢谢

我添加了名为nav.js的js文件

 "scripts": [
          "src/assets/js/nav.js"
        ]

您应该在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，例如jquery：

declare var jquery:any;
declare var $ :any;

你应该有这样的东西：

import { Injectable } from '@angular/core';
// Other imports...

declare var cartodb: any;
@Injectable()
export class ARandomService {
}

"scripts": [
   "node_modules/fast-levenshtein/levenshtein.js"
]

如果您想要使用的代码在npm中不存在，请进行搜索。

Angular 6有一个专门的位置来声明js文件在angular.json的专用数组中，在

及

例如：

npm install fast-levenshtein --save

将在节点模块下安装js库

js lib文件相对于项目的路径声明如下：

import { Injectable } from '@angular/core';
// Other imports...

declare var cartodb: any;
@Injectable()
export class ARandomService {
}

"scripts": [
   "node_modules/fast-levenshtein/levenshtein.js"
]

然后在组件中声明要使用的变量，

如npm文档或@LuaXD所述，您应该首先使用npm安装库。然后，该库将添加到项目中的node_modules文件夹中

现在：

如果您想将js文件导入angular项目，首先应该检查angular的版本，如果您使用的是版本2和版本4，您应该这样写：

      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

      "scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]

如果您使用的版本高于4，如5、6或7，您应该这样写：

      "scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

      "scripts": [ "./node_modules/jquery/dist/jquery.min.js" ]

在本例中，我将jquery导入到angular项目中。我希望它能工作

如果您能掌握脚本中的函数，我建议您采取一些变通方法。因此，您可以将它们作为函数放在component.ts代码中，或者如果您不能/不想这样做，则只需导出/导入它们。比如说

myscript.js

  function a(){ ...}
    function b(){...}


    module.exports.a=a
    module.exports.b=b

function myCustomName(){..};
module.exports.customName=myCustomName

mycomponent.component.ts

..
import a from './path/../myscript.js';
import b from './path/../myscript.js';

..
constructor(){
...
a.a()
b.b()
...
}

ps：很多时候你会发现函数匿名，所以你只需要重命名它们，比如说

myscript.js

  function a(){ ...}
    function b(){...}


    module.exports.a=a
    module.exports.b=b

function myCustomName(){..};
module.exports.customName=myCustomName

函数（）{..}（）

将是

myscript.js

  function a(){ ...}
    function b(){...}


    module.exports.a=a
    module.exports.b=b

function myCustomName(){..};
module.exports.customName=myCustomName

包含jquery的工作示例：我们不能导入文件而不是使用declare var吗？declare var cartodb:any；声明var jquery:any；声明var jqueryui:any；我可以在我的TypeScript中导入多个这样的库？如果是自定义js文件呢。如何声明变量