web-dev-qa-db-ja.com

JSファイルをangular 6にインポートする方法は？

angular 6.でjsファイルをインポートするにはどうすればよいですか？6.ナビゲーションバーを実装しようとしましたが、js関数が含まれています。ありがとう!!!

Nav.jsというjsファイルを追加します

 "scripts": [
          "src/assets/js/nav.js"
        ]
javascriptangularfileimport
3
George

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 {
}

Ps使用するコードがnpmに存在しない場合は検索します。

3
LuaXD

スクリプト内の関数を把握できる場合は、いくつかの回避策を提案します。したがって、それらを関数として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
0
Wael Chorfan

まず、npmを使用してライブラリをインストールする必要があります。次に、ライブラリがプロジェクトのnode_modulesフォルダーに追加されます。

今：

jsファイルをangularプロジェクトにインポートする場合は、最初にangularのバージョンを確認する必要があります。バージョン2および4を使用している場合は、次のように記述します。

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

そして、5、6、7のような4より上のバージョンを使用している場合は、次のように書く必要があります。

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

この例では、jqueryをangularプロジェクトにインポートします。うまくいくことを願っています

0
Seyed-Amir-Mehrizi

Angular 6には、angular.jsonの専用配列内でjsファイルを宣言するための専用の場所があります。

 /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の説明に従って、使用する変数をコンポーネントで宣言します

0
user1767316