Angular'a bir JavaScript komut dosyasını nasıl eklerim ve bu komut dosyasından bir işlevi nasıl çağırırım?

abc.js"Genel" adında bir işlevi olan bir JavaScript dosyam var xyz(). Angular projemde bu işlevi çağırmak istiyorum. Bunu nasıl yaparım?

angular-cli.json( angular.jsonAçısal 6+ kullanırken) dosyanın içindeki komut dosyalarına bakın .

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

sonra ekleyin typings.d.ts( srchalihazırda yoksa bu dosyayı içinde oluşturun )

declare var variableName:any;

Dosyanıza şu şekilde aktarın:

import * as variable from 'variableName';

Global bir kitaplık eklemek için, örneğin jquery.jskomut dizisindeki dosya angular-cli.json( angular.jsonaçısal 6+ kullanılırken):

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

Bundan sonra, zaten başlamışsa servisi yeniden başlatın.

Dış js dosya ekle index.html .

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

İşte myjs.js dosyası:

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

Sonra aşağıdaki gibi bileşen içinde olduğunu beyan edin

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>

Benim için çalışıyor ...

Sen de yapabilirsin

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

veya

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