web-dev-qa-db-ja.com

外部のjsファイルを含める方法 Angular 4からangleからjsへ関数を呼び出す

関数xyz()を持つabc.jsという名前のファイルがあるとしましょう。 Angular 4プロジェクトでその関数を呼び出したいです。どうすればいいの？

javascriptangular
81
Piyush Jain

angular-cli.jsonファイル内のスクリプトを参照してください。

"scripts": [
    "../path" 
 ];

それからtypings.d.tsを追加してください

declare var variableName:any;

次のようにファイルにインポートしてください。

import * as variable from 'variableName';
70
Aravind

グローバルライブラリ、たとえばjquery.jsファイルをangular-cli.jsonのscripts配列に含めるには、次のようにします。

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

この後、ng serveが既に起動されている場合は再起動します。

21
Rahul Singh

どちらでもできます

import * as abc from './abc';
abc.xyz();

または

import { xyz } from './abc';
xyz()
13
crash

index.htmlに外部jsファイルを追加します。

<script src="./assets/vendors/myjs.js"></script>

myjs.js file：

var myExtObject = (function() {

    return {
      func1: function() {
        alert('function 1 called');
      },
      func2: function() {
        alert('function 2 called');
      }
    }

})(myExtObject||{})


var webGlObject = (function() { 
    return { 
      init: function() { 
        alert('webGlObject initialized');
      } 
    } 
})(webGlObject||{})

次に、以下のようなコンポーネントにあることを宣言します

demo.component.ts

declare var myExtObject: any;
declare var webGlObject: any;

constructor(){
    webGlObject.init();
}

callFunction1() {
    myExtObject.func1();
}

callFunction2() {
    myExtObject.func2();
}

demo.component.html

<div>
    <p>click below buttons for function call</p>
    <button (click)="callFunction1()">Call Function 1</button>
    <button (click)="callFunction2()">Call Function 2</button>
</div>

それは私のために働いています...

5
Nagnath Mungade