Wie füge ich eine JavaScript-Skriptdatei in Angular ein und rufe eine Funktion aus diesem Skript auf?

Ich habe eine JavaScript-Datei namens abc.js, die eine 'öffentliche' Funktion namens hat xyz(). Ich möchte diese Funktion in meinem Angular-Projekt aufrufen. Wie mache ich das?

Lesen Sie die Skripte in der Datei angular-cli.json( angular.jsonbei Verwendung von Angular 6+).

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

Fügen Sie dann hinzu typings.d.ts(erstellen Sie diese Datei, srcfalls sie noch nicht vorhanden ist).

declare var variableName:any;

Importieren Sie es in Ihre Datei als

import * as variable from 'variableName';

Um eine globale Bibliothek einzuschließen, z. B. eine jquery.jsDatei in das Skriptarray von angular-cli.json( angular.jsonbei Verwendung von Angular 6+):

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

Starten Sie danach den Dienst neu, wenn er bereits gestartet ist.

Fügen Sie eine externe JS-Datei in die Datei index.html ein .

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

Hier ist die Datei myjs.js :

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

Erklären Sie dann, dass es sich um eine Komponente wie unten handelt

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>

Es funktioniert für mich ...

Du kannst entweder

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

oder

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